两个按钮更改类，如单选按钮，但当时只有一个答案

【问题标题】：Two buttons changing class like radio buttons but only one at the time两个按钮更改类，如单选按钮，但当时只有一个
【发布时间】：2017-10-01 21:45:42
【问题描述】：

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  if (id == 'axe') {
    $(this).toggleClass('as-in-one as-one');
  } else if (id == 'saw') {
    $(this).toggleClass('as-in-two as-two');
  }

})

.as-in-one {
  color: red;
}

.as-one {
  color: blue;
}

.as-in-two {
  color: red;
}

.as-two {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>

在我的代码中，我希望能够只更改一个按钮的类，从 red 到 blue，但是如果我点击另一个按钮，第一个按钮会变成默认类 red，如果它是blue 和另一个切换到 blue 反之亦然。

【问题讨论】：

对变量的看法。如果单击并将按钮更改为蓝色，请将其设置为全局变量，然后单击检查是否为蓝色，然后设置为蓝色。
"...但当时只有一个" 呃，单选按钮就是这样工作的。

标签： javascript jquery html css jquery-selectors

【解决方案1】：

也许不是我想做的——但你去吧！点击axe时，添加as-in-two类并移除as-two类，点击saw时，添加as-in-one类并移除as-one类。

请看下面的演示：

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  if (id == 'axe') {
    $(this).toggleClass('as-in-one as-one');
    $('#saw').addClass('as-in-two');
    $('#saw').removeClass('as-two');
  } else if (id == 'saw') {
    $(this).toggleClass('as-in-two as-two');
    $('#axe').addClass('as-in-one');
    $('#axe').removeClass('as-one');
  }

})

.as-in-one {
  color: red;
}

.as-one {
  color: blue;
}

.as-in-two {
  color: red;
}

.as-two {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in-one'>AXE</button>
<button id='saw' class='saw as-in-two'>SAW</button>

最好使用单个 red 和 blue 类：

$('.as-in-one').click(function(e) {
   $('.as-in-one').not(this).removeClass('as-one');
   $(this).toggleClass('as-one');
})

.as-in-one {
  color: red;
}
.as-in-one.as-one {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='as-in-one'>AXE</button>
<button id='saw' class='as-in-one'>SAW</button>

【讨论】：

【解决方案2】：

您不需要单独的按钮类，如果您在它们上使用相同的类，它会更容易：只需选择“其他”按钮并重置其状态：

$('#axe, #saw').click(function(e) {
  var id = $(this).attr('id');
  var other = $(id == 'axe' ? '#saw' : '#axe');
  $(this).toggleClass('as-in as');
  other.removeClass("as").addClass("as-in");
});

.as-in {
  color: red;
}

.as {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>

【讨论】：

【解决方案3】：

我想你正在寻找这样的东西。

$('#axe, #saw').click(function(e) {
  if(!$(this).hasClass('as')){
    $(this).toggleClass('as');
    $(this).siblings().not(this).removeClass('as');
  }
})

.as-in {
  color: red;
}

.as {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='axe' class='axe as-in'>AXE</button>
<button id='saw' class='saw as-in'>SAW</button>

【讨论】：