Range('A','Z') jQuery 问题

Question

我有一个 PHP 函数可以创建一个 <力>与字母表中的每个字母。

<?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

因为每个

都有相同的 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());
    });
})