javascript - 如何调用动态 ID？

Question

我的代码是这样的:

<?php
    for($i=0;$i<5; $i++) {

?>
        <button type="submit" id="test<?php echo $i ?>">
            test <?php echo $i ?>
        </button>
<?php
    }
?>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    for(var i=0; i < 5; i++) {        
        $("#test"+i).click(function(){
            console.log('test'+i);
        });
    }
</script>

当我点击任何按钮时，结果:

test5

当我点击按钮测试 0 时，结果应该是:test0

为什么它不起作用？

Answer 1

你应该这样做。因为 i 总是 5。

for(var i=0; i < 5; i++) {        
  $("#test"+i).click(function(){
    console.log($(this).text());
  });
 }

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button type="submit" id="test0">test 0</button>
<button type="submit" id="test1">test 1</button>
<button type="submit" id="test2">test 2</button>
<button type="submit" id="test3">test 3</button>
<button type="submit" id="test4">test 4</button>

还有

在这种情况下最好使用 class 属性

像这样

$(".test").click(function(){
  console.log($(this).text());
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button type="submit" class="test">test 0</button>
<button type="submit" class="test">test 1</button>
<button type="submit" class="test">test 2</button>
<button type="submit" class="test">test 3</button>
<button type="submit" class="test">test 4</button>