Question

标题，我唯一的问题是，当我在页面上创建了所有元素并点击了所有元素时，我的页面看起来像棋盘。

我只能＆＃34;切换＆＃34;一半的背景颜色。因此，它们不仅不会在第一次点击时改变颜色，而且根本不会发生变化。

这是我的Javascript：

for (var i = 0; i < 10; i++) {
    var itemContainer = document.createElement("div" + i);
    itemContainer.id = "div" + i;
    itemContainer.className = "item";
    itemContainer.innerHTML = "Hello!";

    for (let i = 0; i < 10; i++) {
        $('div' + i).click(function() {
            if (this.className == "item") {
                this.className = "itemselected";
            } else {
                this.className = "item";
            }
        });
    }

    document.getElementById("page").appendChild(itemContainer);
}

我为你想要它的人做了JSFiddle。

我已经看到了一些关于如何切换背景颜色的其他问题，但没有一个问题与我有同样的问题。

Answer 1

您将第二个循环插入第一个循环，每隔一秒i被跳过。并且可能能够将您的div更改为i=18

JSFiddle

for (var i = 0; i < 10; i++) {
    var itemContainer = document.createElement("div" + i);
    itemContainer.id = "div" + i;
    itemContainer.className = "item";
    itemContainer.innerHTML = "Hello!";

    document.getElementById("page").appendChild(itemContainer);
}

for (let i = 0; i < 10; i++) {
    $('div' + i).click(function() {
        if (this.className == "item") {
            this.className = "itemselected";
        } else {
            this.className = "item";
        }
    });
}

编辑：您可以简单地将第二个循环的内容放入第一个循环中，以简化您的代码。

Answer 2

你很亲密，缺少id元素的“＃”

$('div' + i).click(function() {


$('#div' + i).click(function() {

并且您已将第二个循环插入第一个循环

https://jsfiddle.net/snbtchph/

Answer 3

你不需要2个循环试试

for (var i = 0; i < 10; i++) {
  var itemContainer = document.createElement("div");
  itemContainer.id = "div" + i;
  itemContainer.className = "item";
  itemContainer.innerHTML = "Hello!";
  document.getElementById("page").appendChild(itemContainer);

    $('#div' + i).click(function() {
    alert("here");
      if (this.className == "item") {
        this.className = "itemselected";
      } else {
        this.className = "item";
      }
    });
}

fiddle example

Answer 4

您的JavaScript第8行的选择器缺少#，因此jQuery正在寻找<div0>, <div1>, <div2>...，而您的第2行JavaScript是var itemContainer = document.createElement("div" + i);实际创建元素{{} 1}}。

由于您使用的是jQuery，我还修改了一些代码以使用它而不是本机JavaScript：https://jsfiddle.net/xfr496p6/5/

我还添加了css div0, div1...以使元素放在一行中。

Answer 5

您的代码存在一些问题：

var itemContainer = document.createElement("div" + i);

创建像<div1>这样的非存在元素是不可能的，删除迭代器。

for (let i = 0; i < 10; i++) {

jQuery的.click()不需要for循环，但是将事件监听器添加到每个案例中，这不是必需的。

document.getElementById("page").appendChild(itemContainer);

在.innerHTML

此外，您似乎在整个代码库中随机使用ES6，jQuery和VanillaJS，我建议您与编写应用程序的方式保持一致。

我已经根据工作变化更新了你的小提琴。 https://jsfiddle.net/xfr496p6/8/

更新了javascript：

for (var i = 0; i < 10; i++) {
    var itemContainer = document.createElement("div");
    itemContainer.id = "div" + i;
    itemContainer.className = "item";
    itemContainer.innerHTML = "Hello!" + i;
    document.getElementById("page").appendChild(itemContainer);
}

$('div').click(function() {
    if (this.className == "item") {
        this.className = "itemselected";
    } else {
        this.className = "item";
    }
});

Answer 6

为什么你有2个嵌套循环？试试这个

for (var i = 0; i < 10; i++) {
    var itemContainer = document.createElement("div" + i);
    itemContainer.id = "div" + i;
    itemContainer.className = "item";
    itemContainer.innerHTML = "Hello!";    

    document.getElementById("page").appendChild(itemContainer);
}

for (let i = 0; i < 10; i++) {
        $('div' + i).click(function() {
            if (this.className == "item") {
                this.className = "itemselected";
            } else {
                this.className = "item";
            }
        });
    }

Answer 7

<强> JSFIDDLE

for (var i = 0; i < 10; i++) {
  var itemContainer = document.createElement("div" + i);
  itemContainer.id = "div" + i;
  itemContainer.className = "item";
  itemContainer.innerHTML = "Hello!";

  $(itemContainer).click(function() {
    if (this.className == "item") {
      this.className = "itemselected";
    } else {
      this.className = "item";
    }
  });

  document.getElementById("page").appendChild(itemContainer);
}

切换div

7 个答案:

JSFiddle