JQuery:更改按钮行为

Question

我是 jquery 的新手，在制作执行以下操作的函数时遇到问题。

我有一个三行四列的表格。在每一列中，我都有一个带有单独 CSS 的按钮，用于悬停效果。每个按钮的想法是在按下按钮时在文本框中显示它们的值。

我尝试了不同的方法来执行以下操作，但均未成功。

1. 更改按下按钮的 css(比如将颜色更改为红色)并使所有其他按钮变回原始颜色(比如黄色)。
2. 在文本框中添加按钮的值。

这是一个 aspx 页面，所以我什至尝试通过调用按钮的目标 if 来获取值。例如:

JS:

//Div Specific Function
$("#step1").click(function (e) {
    var thisID = e.target.ty;
    $('#input').data('btnType', 'Amount').each(function () {
        $(this).toggleClass('button');
    })

    $(thisID).toggleClass('button-hover');

});

html

<table cellpadding="10" cellspacing="0" width="90%">
 <tr>
  <td>
   <input type="button" data-btnType="Amount" id="btn50" runat="server" value=" $50" Text="$50"  class="button" />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn100" runat="server" value="$100" Text="$100" class="button"  />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn150" runat="server" Text="$150" value="$150" class="button"  />
  </td>
  <td>
   <input type="button" data-btnType="Amount" id="btn200" runat="server" Text="$200" value="$200" class="button"  />
  </td>
 </tr>
</table>

如何让这些按钮像 radio 效果一样。请注意，此 div 中共有 10 个按钮。

问候。

Answer 1

$(".button").click(function () {
    $(".red").removeClass("red").addClass("yellow"); // remove the prev pressed button class
    $(this).removeClass("yellow").addClass("red");      // add the red css class to  pressed button
    $(".button").not(".red").addClass("yellow"); // add to all other buttons yellow class
    $("#textBox").val($(this).val());    // get val of pressed button val
});