Question

我有 HTML 代码：

  <table>
          <thead>
                <tr>
                    <th>Description</th>
                    <th>Bundle Price</th>
                    <th>Comparable Pence<br>Per Minute Charge</th>
                    <th>&nbsp;</th>

                </tr>             
            </thead>
            <tbody>
                <tr>
                    <td>Fixed Bundle 500</td>
                    <td>£4.50</td>
                    <td>0.90</td>
                    <td><a class="btn select">Select</a>
                    <input id="select-landline" type="radio" data-cost="4.50" value="500" name="FixedBundle">
                    </td>
                </tr>
                <tr>
                    <td>Fixed Bundle 1000</td>
                    <td>£8.00</td>
                    <td>0.80</td>
                    <td><a class="btn select">Select</a>
                    <input id="select-landline" type="radio" data-cost="8.00" value="1000" name="FixedBundle">
                    </td>
                </tr>
            </tbody>
        </table>

这里是 jQuery 代码：

<script>
$(document).ready(function(){

$('.btn.select').click(function(){
     if(!$(this).closest('tr').hasClass('highlight')){
        $(this).closest('table').children('tbody').children('tr').removeAttr('class');
        $(this).closest('tr').addClass('highlight');
        $(this).closest('td').children('input:radio').attr("checked", "checked");
        $(this).html("Cancel");

      } else if($(this).closest('tr').hasClass('highlight')){
        $(this).closest('tr').removeClass('highlight');
        $(this).closest('td').children('input:radio').removeAttr("checked");
        $(this).html("Select");
      }
  });
});
</script>

正如您所看到的，表中还有一些SELECT/CANCEL按钮，通过单击其中一个按钮，按钮的内容会发生变化。您可以阅读取消而不是选择。

我的问题是当点击同一个按钮，一个工作正常并且内容发生变化但是如果我点击（选择）其中一个然后我点击（选择）另一个，第一个按钮不会改变它的内容并保留在“取消”。

所以，当我点击一个按钮时，我想重置其余部分。

Answer 1

更新小提琴：http://jsfiddle.net/98TpW/2/

   $(document).on("click", ".btn", function () {
    $('table tr').removeClass("highlight");
    $('table tr').find(".btn").html("Select");
    $('table tr').find("input:radio").removeAttr("checked");
    if (!$(this).closest('tr').hasClass('highlight')) {
        $(this).closest('tr').addClass('highlight');
        $(this).closest('td').find('input:radio').prop("checked", true);
        $(this).html("Cancel");
    } else {
        $(this).closest('tr').removeClass('highlight');
        $(this).closest('td').find('input:radio').removeAttr("checked");
        $(this).html("Select");
    }
});

Answer 2

基本上，您可以为按钮设置数据属性，并在需要时加载。

<button type="button" data-text="Select">Select</button>

<script type="text/javascript">
var $button = $('#your_button_selector');
var $text = $button.data('text');

//Your code logic and stuff
$('input[type=checkbox]').change(function(){
    //You can change back button's text to old value
    $button.text($text);
});

</script>

jQuery - 如何重置此按钮的html（）？

2 个答案: