通过VAR增加第n个孩子的减少

Question

我已经声明了一个var，每次我点击第一个按钮时，我希望第一个孩子是黄色的，然后是下一个......另一个按钮必须做相反的事情，用黄色从最后一个元素中删除黄色。我怎样才能做到这一点？

http://jsfiddle.net/XZyFW/10/

<button id="button1">increase yellow</button>
<div id="container">
    <div>Hello 1</div>
    <div>Hello 2</div>
    <div>Hello 3</div>
    <div>Hello 4</div>
    <div>Hello 5</div>
</div>
<button id="button2">decrease yellow</button>

这是JavaScript

$(document).ready(function(){
  var i = 1;
  $("#button1").click(function(){
      if (i > 5)
      {
          return false;
      }
      else
      {
          $("#container div:nth-child(i)").css("background-color","yellow");
          i++;
      }
  });
  $("#button2").click(function(){
      if (i < 1)
      {
          return false;
      }
      else
      {
          $("#container div:nth-child(i)").css("background-color","white");
          i--;
      }
  });
});

Answer 1

http://jsfiddle.net/XZyFW/11/

当您想将变量 i 添加到字符串时，您正在使用 "nth-child(i)" 。请改用"nth-child("+i+")" .

Answer 2

字符串连接：

$("#container div:nth-child(" + i + ")")

Answer 3

正确的 js 代码

$(document).ready(function(){
  var i = 1;
  $("#button1").click(function(){
      if (i > 5)
      {
          return false;
      }
      else
      {
          $("#container div:nth-child("+i+")").css("background-color","yellow");
          i++;
      }
  });
  $("#button2").click(function(){
      if (i < 1)
      {
          return false;
      }
      else
      {
          $("#container div:nth-child("+i+")").css("background-color","white");
          i--;
      }
  });
});