Question

我创建了两个表单组：

我需要单击每个组中的每个按钮并更改其按钮样式（从灰色更改为绿色，反之亦然）。但是，当我单击一个按钮时，除了按下了一个绿色之外，所有按钮都变成了灰色。我需要在每个表单组中更改按钮。请帮忙！

$('.btn').click(function() {
  var $this = $(this);
  if ($this.parents('form-group').hasClass('btn-success')) {
    $this.removeClass('btn-success')
  } else if (!$this.hasClass('btn-success')) {
    $('.btn').removeClass('btn-success')
    $this.addClass('btn-success');

  }
});
$('this').parents('form-group').addClass()

.btn-success {
  color: #fff;
  background: green;
}

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="btns">Меняли фамилию?</label>
  <div class="btns">
    <button type="button" class="btn">Да</button>
    <button type="button" class="btn btn-success">Нет</button>
  </div>
</div>
<div class="form-group">
  <label for="btns">Пол</label>
  <div class="btns">
    <button type="button" class="btn btn-success">Муж</button>
    <button type="button" class="btn">Жен</button>
  </div>
</div>

这是我的密码笔的链接： https://codepen.io/ksena19/pen/MqRZZK

Answer 1

如果我正确理解，则只需要交换状态即可。由于只有两个，这可能对您有用。

请注意，这不会检查当前状态。如果您单击活动按钮，它仍然会切换。

$('.btn').click(function() {
  $('.btn').toggleClass('btn-success');
});

.btn-success {
  color: #fff;
  background: green;
}

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="btns">Меняли фамилию?</label>
  <div class="btns">
    <button type="button" class="btn">Да</button>
    <button type="button" class="btn btn-success">Нет</button>
  </div>
</div>
<div class="form-group">
  <label for="btns">Пол</label>
  <div class="btns">
    <button type="button" class="btn btn-success">Муж</button>
    <button type="button" class="btn">Жен</button>
  </div>
</div>

Answer 2

jQuery：.btn检查所有具有<button id="btn1" ... >类的按钮。您可以使用ID代替类。

$("#btn1").click()...

然后是C:\users\prete\Desktop\booksrc$ gcc -g firstprog.c

Answer 3

您尝试仅在一个按钮上添加一个类，并在JS代码中以$ this标识。但是您需要更改所有按钮类，因此您可以轻松地做到这一点：

https://codepen.io/benCat/pen/EeJMxO

$('.btn').click(function(){
    var button = $('button');
    if (button.hasClass('btn-success')) {
        button.removeClass('btn-success')
    } else if (!button.hasClass('btn-success')) {
        $('.btn').removeClass('btn-success')
        button.addClass('btn-success');

    }
});

如何更改每个表单组中的按钮

3 个答案: