发表于： 2020-10-24 22:43:07
0 1258
今天完成的事情：
做任务4
渲染div盒子
for (index = 0; index < arr.length; index++) {
if (arr[index] == "平民") {
arrPlayer.push({
name: "平民",
death: true
});
} else {
arrPlayer.push({
name: "杀手",
death: true
});
};
// 创建名为playerbox的div
var box = document.createElement("div");
box.className = "playerbox";
// setAttribute() 方法添加指定的属性，并为其赋指定的值。
box.setAttribute("select-box", index);//号数
box.setAttribute("select-person", arr[index]);//身份
box.innerHTML =
"<p class='name life " + deal + "' id='boxs" + (index + 1) + "'>" + (arr[index]) + "</p>" +
"<p class='number'>" + (index + 1) + "号" + "</p>" +
"<div class='playerpic'>" +
"<img class='imgs' select-person='" + arr[index] + "' src='./images/JS.4-杀人.png'>" +
"</div>";
var boxs = document.getElementById("boxs");//获取boxs的节点
$('#boxs').append(box);// 将boxs添加到box中
var deal = "";
// if (playernum == d) {
// deal = "xxxxx"
// }
// console.log(playernum);
// console.log(d);
// console.log(index);
// console.log(arr[index]);
var itemId = '#boxs' + index;
console.log(itemId);
选中变色事件
// 选中变色
// 方法1
// 设置box点击事件，this指定box
$(".playerbox").click(function () {
// getAttribute() 方法返回指定属性名的属性值。
var person = this.getAttribute('select-person');
var array = this.getAttribute('select-box');
// console.log(array);
// console.log(this.getAttribute('select-box'))
// console.log(this);
// 设置boxs盒子的隐藏显示
$(".name").removeClass('.name').css('background-color', ' #f5c97b');
$(this).children('.name').css('background-color', '#83b09a');
// $(".name").removeClass('give').css('background-color', ' #f5c97b');
// $(".name").eq(array).addClass('give').css('background-color', '#83b09a');
// this.style.backgroundColor = "#83b09a";
// event.srcElement.style.backgroundColor = "#83b09a";
// console.log(event);
// console.log(event.srcElement);
// 设置图片隐藏显示
$(".imgs").hide();
$(".imgs").eq(array).show();
// 字符串array转换成数字p
var p = Number(array);
// console.log(p);
playernum = (p + 1);
// console.log(playernum);
});
};
返回列表
评论