2

如何定位具有特定类的所有按钮的子集？我想要完成的是，一次只能选择一个带有 P 或 S 的按钮。如果用户单击特定的“P”按钮，它会从每个其他“P”按钮中删除突出显示类，与“S”相同。

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

您的意思是您希望能够仅突出显示具有“P”类的人的一个按钮。与“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 回答
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

首先，您的 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 回答