Question

我在jQuery中编写了如下代码

＆＃13;

$(document).ready(function() {
  $("li").click(function() {
    var str = $(this).index();
    alert(str);
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active");

  });
});

＆＃13;

我想将存储在str变量中的值作为第n个子索引号传递。哪里我做错了？

Answer 1

每次点击都会将str变量与1一起增加。请参阅下面的工作代码：

＆＃13;

$(document).ready(function() {
  $("li").click(function() {
    var str = $(this).index();
    str++;
    //console.log(str);
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active");

  });
});

＆＃13;

.product-active{
  color: #F00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>List element</li>
  <li>List element</li>
  <li>List element</li>
  <li>List element</li>
  <li>List element</li>
</ul>
<div id="headdiv">
  <div>some div</div>
  <div>some div</div>
  <div>some div</div>
  <div>some div</div>
  <div>some div</div>
</div>

＆＃13;

Answer 2

我们正在创建一个变量并使用str值附加文本，然后在jQuery中使用该字符串。

$(document).ready(function() {
      $("li").click(function() {
        var str = $(this).index();
        alert(str);
        //Create a new variable
       var buildStr = "#headdiv div:nth-child(" + str + ")";
        $(buildStr).addClass("product-active");

      });
    });

Answer 3

您应该添加str++。

因为str关键字每次都在每次加载时创建一个新变量，所以全局变量str没有得到更新/递增。

＆＃13;

$(document).ready(function() {
  $("li").click(function() {
    var str = $(this).index();
    str++;
    $("#headdiv div:nth-child(" + str + ")").addClass("product-active");

  });
});

＆＃13;

.product-active {	
	background-color: green !important;
}
.not-active{
  background-color: red;
  height: 50px;
  margin-right: 5px;
  width: 50px;
  border-radius: 50%;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Click Me</li>
  <li>Click Me</li>
  <li>Click Me</li>
</ul>
<div id="headdiv">
  <div class="not-active"></div>
  <div class="not-active"></div>
  <div class="not-active"></div>
</div>

＆＃13;

在jquery中传递变量值

3 个答案: