按钮大小和颜色变化

Question

我这里有 4 个按钮，但只有第一个按钮可以工作，我希望相同的 jquery 代码稍作更改以在所有这些按钮上工作...... 我可以复制过去的 jquery 4 次并将其更改为工作，但我想要一个 jquery 更简单和更少的代码怎么做？

CSS

.yellowBackground {    
    background-color: yellow;    
}

.redBackground {    
    background-color: red;
}

button.yellowBackground {    
    width:50px; 
    height:50px; 
}

HTML

<table>
    <tr>
      <td><button id="button"  class="yellowBackground">Pause</button></td>
      <td><button id="button"  class="yellowBackground">Pause</button></td>
      <td><button id="button"  class="yellowBackground">Pause</button></td>
      <td><button  id="button"  class="yellowBackground">Pause</button></td>
   </tr>
</table>

JS

$(function() {    
    $("#button").click(function() {    
        changeThumb();    
    });    
});

function changeThumb() {    
    $("#button").toggleClass("redBackground");    
}

Answer 1

在 JQuery 选择中选择类或 id 之前指定元素：

$(function() {

$('button#button').click(function() {

        $(this).toggleClass("redBackground");

    });

});

Answer 2

ID 必须是唯一的，您也可以使用类选择器 yellowBackground 来做到这一点，如下所示：

$(function() {
      $(".yellowBackground").click(function() {
      $(this).toggleClass("redBackground");
    });
 });

FIDDLE DEMO

您还错过了在您的<table> html 中打开<tr> 标记。请更正

Answer 3

ID 必须是唯一的，您可以将处理程序添加到类 .yellowBackground 或 button

$(function() {

    $(".yellowBackground").click(function() {

        $(this).toggleClass("redBackground");

    });

});