Question

这应该很简单。我希望在点击时为所有用户分配props个属性。

我从一个for循环开始迭代所有属性，嵌套另一个for循环迭代li的集合。这似乎不起作用，我无法弄清楚错误是什么。我也得到错误：

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的

这是我的代码和jsfiddle：http://jsfiddle.net/v3Pdr/2/

HTML

<ul>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
  <li>FooBar</li>
</ul>

<button type="submit">Click</button>

JS

(function(){

    var props = {
        color: "salmon",
        fontSize: "24px",
        textTransform: "uppercase"
    };

    for(var iterate in props) {
        for(var i = 0; i < document.querySelectorAll("ul li").length; i++) {
            document.querySelector("button").onclick = function() {
                document.querySelector("ul li").style[iterate] = props[iterate];    
                console.log(iterate);
            }
        }
    }

    console.log(document.querySelectorAll("ul li")); // has length of 20

}());

提前感谢。

Answer 1

你以错误的方式解决问题：

(function(){

  var props = {
    color: "salmon",
    fontSize: "24px",
    textTransform: "uppercase"
    };

  document.querySelector("button").onclick = function() {
    for(var iterate in props) {
        for(var i = 0; i < document.querySelectorAll("ul li").length; i++) {
            document.querySelectorAll("ul li")[i].style[iterate]=props[iterate];
            };    
        }
    }

    console.log(document.querySelectorAll("ul li"));

}());

请参阅jsfiddle.net/v3Pdr/3/。

使用单击事件分配样式不起作用

1 个答案: