将 class 添加到单选项的父级的最佳方法，删除并添加 class

Question

关于 jQuery 和改进我的代码的快速提问。

基本上，根据单选按钮的 selection，我将 select class 添加到父容器，在本例中为列表项。删除 select class 从以前 selected 项更改。

我不禁觉得有更好的方法来压缩和清理下面的代码。

$('#fubar input[name=game]').change(function(){
    $('.selected').removeClass('selected');
    $(this).parent('li').addClass('selected');
})

感谢您的帮助 :) 非常感谢。

Answer 1

$('#fubar input[name=game]').change(function(){
    $this = $(this);
    $this.closest('ul').find($('.selected')).removeClass('selected');
    $this.closest('li').addClass('selected');
})

您只能将 .parent 更改为 .closest - 但您的解决方案看起来不错，

Answer 2

试试 closest() 和 find():

$('#fubar').find('input[name=game]').on('change', function(){
    $('#fubar').find('li.selected').removeClass('selected');//selector changed
    $(this).closest('li').addClass('selected');//used `closest()`
})

来自docs：

// Fast: $( "#container div.robotarm" );
// Super-fast: $( "#container" ).find( "div.robotarm" );

Answer 3

您也可以尝试为要更改的两个元素切换 class（这会更短）：

$(this).closest('li').add('.selected').toggleClass('selected');

Answer 4

一种方法：

$(document).ready(function() {
  // this detects the change event as it propagates through to the
  // <li> element:
  $('li').on('change', function() {
    // adds the 'selected' class-name to the <li> that
    // holds the changed <input> (the change event is 
    // fired only on checking the <input>):
    $(this).addClass('selected')
    // selects the siblings of the <li>:
    .siblings()
    // removes the 'selected' class-name from those siblings:
    .removeClass('selected');
  });
});

$(document).ready(function() {
  $('li').on('change', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
  });
});

li {
  border: 1px solid #000;
  margin: 0 0 0.5em 0;
  list-style-type: none;
}
li.selected {
  border-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fubar">
  <li>
    <label>
      <input type="radio" name="game" />One</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Two</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Three</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Four</label>
  </li>
</ul>

与上述类似，但此版本首先选择相关的 <input /> 个元素，其 change 您要检测的事件：

$(document).ready(function() {
  // selects the <input> elements whose type is equal to 'radio'
  // and whose name is equal to 'game':
  $('input[type=radio][name=game]')
  // looks to the closest <li> ancestor of those <input> elements:
  .closest('li')
  // as above from this point:
  .on('change', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
  });
});

$(document).ready(function() {
  $('input[type=radio][name=game]').closest('li').on('change', function() {
    $(this).addClass('selected').siblings().removeClass('selected');
  });
});

li {
  border: 1px solid #000;
  margin: 0 0 0.5em 0;
  list-style-type: none;
}
li.selected {
  border-color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="fubar">
  <li>
    <label>
      <input type="radio" name="game" />One</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Two</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Three</label>
  </li>
  <li>
    <label>
      <input type="radio" name="game" />Four</label>
  </li>
</ul>

参考文献：

CSS:
- 属性选择器。
jQuery:
- addClass().
- closest().
- on().
- removeClass().
- siblings().

将 class 添加到单选项的父级的最佳方法，删除并添加 class

Best way to add class to parent of radio item, remove and add class

jquery

selector