2

我有很多按钮，我只想切换一个，所以它的颜色变成了红色。单击另一个按钮时，第一个按钮恢复正常，单击的第二个按钮变为红色。我的问题是，当您使用 Twitter Bootstrap 切换单选按钮时，当它们在标签内时它无法正常工作。当我删除它们时，它开始正常工作，但必须有办法解决它。我不想删除标签，否则会弄乱我的孔设计，然后将所有这些按钮并排放置，这可能是“btn-group”类应该做的。如果我不使用 btn-group 它仍然不起作用，问题出在标签上。

$('.btn-group > .btn').click(function() {

    if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){
        var btnGroup = $(this).parent('.btn-group');

        if(btnGroup.attr('data-toggle') == 'buttons-radio') {
            btnGroup.find('.btn').each(function() {
                $(this).removeClass($(this).attr('class-toggle'));
            });
            $(this).addClass($(this).attr('class-toggle'));
        }
      }
  });

jQuery 我来自：活动时切换 Twitter Bootstrap 按钮类

<table class="table" id="table_change">
 <tbody>
  <div class="btn-group" data-toggle="buttons-radio">
   <tr>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
   </tr>
   <tr>                                                
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td>
   </tr>
  </div>                                               
 </tbody>
</table>

我真的很感激这个问题的解决方案。也许添加一些 jQuery 或其他东西。

4

1 回答 1

1

我自己解决了这个问题，所以如果有人需要，这里是代码。

jQuery：

   $('.reject-toggle').click(function() {
        $('.reject-toggle').each(function() {
            $(this).find('button');
            $('.color-btn').removeClass('btn-danger');
        });
        $(this).find('button').addClass('btn-danger');
    });

HTML：

<table class="table">
 <tbody>
 <tr>
  <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
</tr>
<tr>                                                
 <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
 <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
 <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
 <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td>
</tr>                                            
</tbody>
</table>
于 2012-10-22T10:20:11.580 回答