2

特定のクラスのすべてのボタンのサブセットをターゲットにするにはどうすればよいですか？私が達成しようとしているのは、一度に選択できるのはPまたはSのボタンを1つだけにすることです。ユーザーが特定の「P」ボタンをクリックすると、「S」と同じように、他のすべての「P」ボタンからハイライトクラスが削除されます。

http://jsbin.com/adopuz/1/edit

$(':button').on('click', function() {

      var typeid = $(this).attr('value');
      $(this).addClass('highlight');

      if(typeid == 'P') {
        $('.primary').val(0);

        $(':button').removeClass('highlight');

        var opts = $(this).parent().find('input').eq(0).val(1);


      }

      if(typeid == 'S') {

      $('.static').val(0);
      var optp = $(this).parent().find('input').eq(1).val(1);

      }

    });

HTML

  <div id= "US">
    This is the US
  <div id="Monday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>


<input type='button' value='P' class='P'>
<input type='button' value='S' class='S'>

  </div>

    <div id="Tuesday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>

<input type='button' value='P' class=''>
<input type='button' value='S' class=''>


  </div>

      <div id="Wednesday">

<input name='' value='1' class="primary" type=''>
<input name='' value='0' class="static" type=''>


<input type='button' value='P' class=''>
<input type='button' value='S' class=''>

  </div>
  </div>
4

3 に答える 3

1

まず、HTMLに少しエラーがあります。最初のいくつかのボタンで「P」または「S」クラスを設定しただけです。次のものはクラスとして''を持っています。次のコードが機能するようにクラスを設定する必要があります。

これを修正しました。最初にすべての「ハイライト」クラスの設定を解除してから、関心のあるクラスを設定する必要があります。

http://jsbin.com/adopuz/8/edit

$(':button').on('click', function() {

  var typeid = $(this).attr('value');

  if(typeid == 'P') {
    $('.primary').val(0);

    $(':button.P').removeClass('highlight');
    $(this).addClass('highlight');

    var opts = $(this).parent().find('input').eq(0).val(1);
  }

  if(typeid == 'S') {
    $('.static').val(0);

    $(':button.S').removeClass('highlight');
    $(this).addClass('highlight');

    var optp = $(this).parent().find('input').eq(1).val(1);
  }
});
于 2013-01-23T18:02:12.457 に答える
1

http://jsbin.com/adopuz/3/edit

：buttonの選択は、クラスセレクターを使用してフィルタリングできます。たとえば、:button.P 読みやすくしたい場合は、jqueryの長い形式で行うことができます。$(':button').filter('.P')

変更が保存されなかったようです。どうしたのかわからない！しかし、私.Pは上のブロックのフィルターに追加しました。ここでremoveClass、同じ行を下のブロックに追加しました.S。また、クラスPとSすべてのボタンを追加しました。そして最後に、私はあなたのaddClass電話をページの一番下に移動したので、あなたremoveClassは新しくクリックされたボタンを誤って削除しませんでした！

于 2013-01-23T17:48:43.020 に答える
1

「P」クラスを持っている人から1つのボタンだけを強調表示できるようにしたいということです。「S」クラスのボタンと同じですか？

例として「P」クラスのすべてのボタンを選択するには、コードをからに少し変更します$(':button')。$(':button.P')これは、「P」クラスのすべてのボタンを取得することを意味します。

デモ

  if(typeid == 'P') {
    $('.primary').val(0);   
    $(':button.P').removeClass('highlight');  
    var opts = $(this).parent().find('input').eq(0).val(1);

  }

if(typeid == 'S') { 
  $('.static').val(0);      
  $(':button.S').removeClass('highlight');     
  var optp = $(this).parent().find('input').eq(1).val(1);  
  }
    $(this).addClass('highlight');
于 2013-01-23T17:50:06.193 に答える