duanliaolan6178 2018-03-19 05:07
浏览 271
已采纳

单击时替换按钮颜色

I have generated a list of buttons , and would like each one to independently change colour when click, so they go red/green alternately on each click.

<?php
$getInfo = getAllRows();

$button = '<button type="button" id ="toggle" ></button>';?>


</php>
<html>
<div class ="enableButtons">
//there are 5 values to iterate over
<?php foreach ($getInfo):
echo $button;
?>
<?php endforeach ?>

                 </div>
 </html>

<script>
$('#toggle').click(function(){
  $(this).toggleClass('green');

});

</script>

.green
{
    background-color:green;
}

The problem Im having is that only the first button seems to be toggling colour , the others dont do anything when I click! Also Im unsure how to make it toggle from red/green alternately.

Any help would be great cheers!

  • 写回答

3条回答 默认 最新

  • dor2p0520 2018-03-19 05:10
    关注

    The problem is with the id. It seems all the button will have same id which is wrong markup.

    Try by replacing id with a common class

    $button = '<button type="button" class="someCommonCLass" ></button>'
    

    In js

    $('.someCommonCLass').click(function(){
      $(this).toggleClass('green');
    
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?