Question

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

<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--;
      }
  });

});

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

3 个答案: