Question

HTML code：

<div class="test" id="inner1">
  ONE
</div>
<div class="test" id="inner2">
  TWO
</div>
<div class="test" id="inner3">
  THREE
</div>

<div class="test1" id="outer1">
  ONE
</div>
<div class="test1" id="outer2">
  TWO
</div>
<div class="test1" id="outer3">
  THREE
</div>

Javascript代码：

<script type="text/javascript">
  for (var i=1;i<=3;i++)
  {
     $("#inner"+i).click(function () {  
        $("#outer"+i).css("background-color","blue")
     });
  }  
</script>

和CSS：

.test{
    width: 100px;
    padding: 10px;
    background-color: green;
    margin-bottom:10px;
    cursor:pointer;
}

.test1{
    width: 100px;
    padding: 10px;
    background-color: red;
    margin-bottom:10px;
}

我想要的是通过点击inner1来改变outer1的背景颜色，通过点击inner2改变outer2的背景颜色，并通过点击inner3改变outer3的背景颜色。上面的代码不起作用，因为它查找了触发事件点击时不存在的outer4（i = 4）...您是否知道如何使用某种循环实现上述内容？

谢谢

http://jsfiddle.net/Lpwmyspo/1/

Answer 1

当你这样迭代时，在你实际点击某个东西之前，不会评估click函数内的i，那时循环已经完成，i的值是最后一件事它被设置在循环中。

真正的问题是，当你可以使用attribute-starts-with选择器而不是this时，你开始使用循环

$('[id^="inner"]').on('click', function () {  
    $('#outer' + this.id.slice(-1)).css("background-color","blue");
});

FIDDLE

Answer 2

怎么样？

$(".test").on("click", function() {
    var which = this.id.replace(/^inner/, "outer");
    $(".test1").css("background-color","transparent"); // in case you need to reset the background
    $("#" + which).css("background-color","blue");
});

演示@ Fiddle

Answer 3

以下列方式进行：

    <div class="test" id="inner1" onclick="abc(this)">
      ONE
    </div>
    <div class="test" id="inner2" onclick="abc(this)">
      TWO
    </div>
    <div class="test" id="inner3" onclick="abc(this)">
      THREE
    </div>

    <div class="test1" id="outer1">
      ONE
    </div>
    <div class="test1" id="outer2">
      TWO
    </div>
    <div class="test1" id="outer3">
      THREE
    </div>

和JavaScript部分如下：

<script type="text/javascript">
  function abc(e){
        var id = e.id;
        var lastchar = id.substr(id.length -1);
        document.getElementById("outer"+lastchar).style.backgroundColor='blue';

  }  
</script>

单击事件和循环

3 个答案: