Question

所以我最近开始越来越多地进入jquery。我已经创建了自定义单选按钮并执行此操作以显示已选择单选按钮：

 $('.radio_1').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_2').removeClass('selected');
  $('.radio_3').removeClass('selected');
 });
 $('.radio_2').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_1').removeClass('selected');
  $('.radio_3').removeClass('selected');
 });
 $('.radio_3').mousedown(function() {
  $(this).toggleClass('selected');
  $('.radio_2').removeClass('selected');
  $('.radio_1').removeClass('selected');
 });

使用CSS，我隐藏了实际的单选按钮本身。有没有办法减少这一点，以减少重复性？

谢谢！

Answer 1

让你的所有收音机都是同一个班级（在我的例子中是.radio）。

下面的代码说的是当其中一个.radio被鼠标移除时，从所有.radio中删除选中的类。并将类.selected添加到被点击的无线电中。

$('.radio').mousedown(function() {
  $('.radio').removeClass('selected');
  $(this).addClass('selected');
});

Answer 2

$('[class^=radio_]').mousedown(function() {
  $('[class^=radio_]').removeClass('selected');
  $(this).toggleClass('selected');
});

'class ^ ='获取所有具有以'radio _'开头的类的元素。

Answer 3

你当然可以。

$('.radio').mousedown(function () {
  $(this).toggleClass('selected').siblings('.radio').removeClass('selected');
})

Answer 4

将按钮设为父级，然后选择该按钮。此外，如果每个人只有一个类，例如.my-radio或其他类，会更容易。但最糟糕的是，你应该能够做到这一点。

 $('.radio_1, .radio_2, .radio_3').mousedown(function() {
   $('.radio_1, .radio_2, .radio_3').removeClass( 'selected' );
   $(this).addClass('selected');
 });

我可以减少这个jQuery吗？

4 个答案: