Question

此脚本循环显示数字1-20。我发现标签重复了20次。

<?php for ($i = 1; $i <= 20; $i++) { ?>
    <button id="btn-<?php echo $i;?>">Button<?php echo $i;?></button>
    <script type="text/javascript">
        $('#btn-<?php echo $i;?>').clck(function() {
            alert("you clicked button <?php echo $i;?>");
        }); 
<?php } ?>

我想在循环外进行$('#btn-<?php echo $i;?>').clck(function() {....

Answer 1

你在这里写的代码是一种反模式。在循环中的所有元素上使用公共类，并将单个事件处理程序附加到该类。例如：

<?php for ($i = 1; $i <= 20; $i++) { ?>
    <button class="foo" data-id="btn-<?php echo $i;?>">Button<?php echo $i;?></button>
<?php } ?>

// in an external .js file far, far away
$('.foo').click(function() {
    console.log("You clicked button " + $(this).data('id'));
});

这是一个可运行的代码段。注意 PHP只需在下面生成HTML 。然后，JavaScript会将click事件处理程序附加到每个按钮。

$('.foo').click(function() {
  console.log("You clicked button " + $(this).data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="foo" data-id="1">Button 1</button>
<button class="foo" data-id="2">Button 2</button>
<button class="foo" data-id="3">Button 3</button>
<button class="foo" data-id="4">Button 4</button>

简单地在循环中使用JavaScript代码

1 个答案: