범위 ('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 내부에서 고유해야합니다.

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

을 그리고 JS :

이 같은 대신 id의 class를 사용하도록 변경해야합니다

$(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()); 
    }); 
}) 

로 변경 될 수 있습니다