单击时的备用按钮颜色答案

【问题标题】：Alternate button colour on click单击时的备用按钮颜色
【发布时间】：2018-03-19 13:38:08
【问题描述】：

我已经生成了一个按钮列表，并希望每个按钮在单击时独立更改颜色，因此每次单击时它们会交替变为红色/绿色。

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

我遇到的问题是只有第一个按钮似乎在切换颜色，当我单击时其他按钮不做任何事情！我也不确定如何让它从红色/绿色交替切换。

任何帮助都会非常高兴！

【问题讨论】：

对于for循环中的动态按钮，您应该使用该类并使用该类调用click事件

标签： javascript php jquery html

【解决方案1】：

问题在于id。似乎所有按钮都有相同的id，这是错误的标记。

尝试将id 替换为通用类

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

在js中

$('.someCommonCLass').click(function(){
  $(this).toggleClass('green');

});

【讨论】：

【解决方案2】：

Here's a JSFiddle。像其他人建议的那样，您希望使用class 而不是id 输出您的按钮，以使您的按钮更易于使用jQuery 选择。这是一个示例，带有漂亮的 CSS。你的按钮应该是这样的格式。

<button type="button" class="toggle"> label </button>

这是一个有效的 SO Snippet。

$('.toggle').click(function(){
  $(this).toggleClass('green');

});

.toggle {
    background-color:#df0606;
    padding:7px;
    border:1px solid red;
    color:white;
    font-size:1.18em;
    box-shadow:2px 4px black;
    margin-left:4px;
    margin-right:4px;
}
.toggle:hover {
    background-color:#cd0101;
    padding:7px;
    border:1px solid red;
    color:#ff2a31;
    font-size:1.18em;
    box-shadow:2px 4px #510809;
    margin-left:4px;
    margin-right:4px;
}

.green {
    color:white;
    padding:7px;
    border:1px solid lime;
    background-color:green;
    font-size:1.18em;
    box-shadow:2px 4px black;
    margin-left:4px;
    margin-right:4px;
}
.green:hover {
    color:lime;
    padding:7px;
    border:1px solid lime;
    background-color:#12de09;
    font-size:1.18em;
    box-shadow:2px 4px #044f12;
    margin-left:4px;
    margin-right:4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<p>
These buttons generated with PHP:
</p>
<div class ="enableButtons">
    <button type="button" class="toggle">One</button>
    <button type="button" class="toggle">Two</button>
    <button type="button" class="toggle">Three</button>
</div>
<p>
Here's some text. Text text text.
</p>
</body>
</html>

【讨论】：

【解决方案3】：

当您生成按钮列表时，您应该使用 class 而不是 id 试试这个：

$button = '<button type="button" class ="toggle" ></button>'
<script>
 $('.toggle').click(function(){
  $(this).toggleClass('green');
 });

</script>

【讨论】：