1

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

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

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

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

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

问候。

4

2 回答 2

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
});
于 2013-04-03T07:35:47.997 回答
0

你可以试试这个：

$("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/

于 2013-04-03T07:53:18.563 回答