範圍（ 'A'， 'Z'）jQuery的問題

Question

我有一個創建< LI>與每個字母一個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

因爲你必須爲每個<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()); 
    }); 
})