javascript - 通过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

字符串连接：

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

Answer 2

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

"nth-child(i)"当您想在字符串中添加变量时，您正在使用,。而是使用"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--;
      }
  });

});