Question

我有很多按钮在一起，我只想切换一个，所以颜色变成红色。单击另一个按钮时，第一个按钮恢复正常，单击第二个按钮变为红色。我的问题是，当你使用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我来自：Toggle Twitter Bootstrap button class when active

<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或其他东西。

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

Bootstrap - 按钮切换不能正常工作

1 个答案: