范围（'A'，'Z'）jQuery问题

Question

我有一个PHP函数可以创建一个＆lt; li>每个字母都用。

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" id="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

这会生成一个没有问题的列表。但是，当我尝试应用以下函数时，它只会在生成第一个按钮的情况下运行。

$(function(){
    $("#alpha-button").click(function(){
        alert($(this).val());
    });
})

Answer 1

您正在使用ID选择器，并且ID需要在DOM内部是唯一的。

您应该将其更改为使用class而不是id，如下所示：

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" class="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

和JS：

$(function(){
    $(".alpha-button").click(function(){
        alert($(this).val());
    });
})

Answer 2

因为每个<li>都有相同的ID。

您可以将其更改为

<?php foreach(range('A','Z') as $letter) : ?>
<li><input type="button" class="alpha-button" value="<?php echo $letter; ?>"></li>
<?php endforeach; ?>

和

$(function(){
    $(".alpha-button").click(function(){
        alert($(this).val());
    });
})