单击事件和for循环

Click event and for loop

本文关键字：循环 for 事件 单击      更新时间：2024-07-06

HTML代码：

<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的背景色，通过点击inner 2更改outer2的背景色和通过点击inner:3更改outer3的背景色。上面的代码不起作用，因为它在寻找事件点击时不存在的outer4（i=4）。。。你知道如何用某种循环来实现上面的内容吗？

谢谢

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

当你这样迭代时，点击函数中的i直到你真正点击了某个东西才被求值，这时循环已经完成，i的值是循环中最后一个设置的值。

真正的问题是，当您可以使用以选择器和this开头的属性而不是时，为什么要使用循环开始

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

FIDDLE

怎么样？

$(".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");
});

Demo@Fiddle

按以下方式执行：

    <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>
相关文章：