Question

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

基本上在选择单选按钮时，我将一个select类添加到父容器，在本例中是列表项。在更改时从先前选择的项目中删除选择类。

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

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

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

Answer 1

一种方法：

$(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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

与上述类似，但此版本首先选择您要检测其<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');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

参考文献：

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

Answer 2

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

只有你能改变的是.parent到.closest - 但你的解决方案看起来还不错，

Answer 3

尝试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：

//快：$（＆＃34; #container div.robotarm＆＃34;）;
//超快：$（＆＃34;＃容器＆＃34; ）.find（＆＃34; div.robotarm＆＃34;）;

Answer 4

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

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

将类添加到无线电项目的父级的最佳方法，删除并添加类

4 个答案: