JQuery：更改按钮行为答案

【问题标题】：JQuery: Change Buttons behaviorJQuery：更改按钮行为
【发布时间】：2013-04-03 16:16:14
【问题描述】：

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

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

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

更改按下按钮的 css（例如将颜色更改为红色）并使所有其他按钮变回原始颜色（例如黄色）。
在文本框中添加按钮的值。

这是一个 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>

我怎样才能使这些按钮像收音机效果一样。请注意，这个 div 一共有 10 个按钮。

问候。

【问题讨论】：

标签： jquery css button

【解决方案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
});

【讨论】：

嗨，mdvlpr。谢谢回复。我尝试了您的解决方案，但没有奏效。这是我的 js 文件的 sn-p： $("#step1").click(function () { //仅针对此 div 中的按钮调用 $('.button').click(function ( ) { //我不明白 .red 是什么 $(this).addClass("button.hover"); $('button :not(cng-button)').toggleClass('cng-button') ; $("input[name='txtOtherAmount']").val($(this).val()); //该值也不复制到文本框 }) });如果给您带来不便，我深表歉意。

【解决方案2】：

你可以试试这个：

$("table :button").click(function() {
  $("table :button").removeClass("selected").addClass("unselected");
  $(this).removeClass("unselected").addClass("selected");
  $("#textBox").val($(this).val());
});

//我对你的html做了一点改动，在你的html代码中添加了未选中的类

jsfiddle 示例：

http://jsfiddle.net/k3J2r/

【讨论】：