2

一緒にたくさんのボタンがあり、1 つだけを切り替えたいので、色が赤に変わります。別のボタンをクリックすると、最初のボタンは通常の状態に戻り、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 に答える