Question

我是jquery的新手，并且在编写执行以下操作的函数时遇到了问题。

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

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

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

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

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个按钮。

问候。

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

Answer 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/

JQuery：更改按钮行为

2 个答案: