Как изменить класс в кнопке при нажатии на нее

Question

У меня есть две кнопки: без фона и зеленого, мне нужно, чтобы они менялись при нажатии на них (с зеленого на тот, с пунктирной границей внизу)

Вот мой HTML:

 <div class="btns">
                <button type="button" class="btn btn-success">Муж</button>
                <button type="button" class="btn btn-link btn-simple">Жен</button>
           </div>

Я написал сценарий так:

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

, но он не работает.

и вот что ядобавлено в файл css:

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

больше ничего, потому что это кнопки начальной загрузки.

Answer 1

Предполагается, что вы хотите переключаться между кнопками в общем контейнере.

/* longer version for demonstration purposes */
$('.btn').click(function() {
  var thisParent = $(this).closest('.btns');
  $(thisParent).find('.btn-success').addClass('btn-simple')
  $(thisParent).find('.btn-success').removeClass('btn-success');
  $(this).removeClass('btn-simple');
  $(this).addClass('btn-success');
})

/* shorter version
$('.btn').click(function() {
  $(this).closest('.btns').find('.btn-success').addClass('btn-simple').removeClass('btn-success');
  $(this).removeClass('btn-simple').addClass('btn-success');
})
*/

* { outline: 0; } button { border-style: none; cursor: pointer; padding: 5px; } button::-moz-focus-inner { border: 0; }
/* ignore above */

.btn-simple {
  border-bottom: 1px dashed #000;
  color: #000;
}
.btn-success {
  background-color: hsla(96, 92%, 37%, 1);
  border-radius: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
  <button type="button" class="btn btn-success">Муж</button>
  <button type="button" class="btn btn-link btn-simple">Жен</button>
</div>
<div class="btns">
  <button type="button" class="btn btn-success">Муж</button>
  <button type="button" class="btn btn-link btn-simple">Жен</button>
   <button type="button" class="btn btn-link btn-simple">три</button>
</div>

скрипка

https://jsfiddle.net/Hastig/bjkchu5L/

Answer 2

Вы не удаляли один из класса btn-success.Кроме того, я думаю, вы должны добавить класс btn-link.Также заверните всю эту часть в document.ready

$(document).ready(function () {
    $('.btn').click(function() {
        var $this = $(this);
        if ($this.hasClass('btn-success')) {
            $this.removeClass('btn-success').addClass('btn-simple');
        } else if ($this.hasClass('btn-simple')) {
            $this.removeClass('btn-simple').addClass('btn-link').addClass('btn-success');
           }
    });
});

Answer 3

Вам необходимо добавить класс, который вы хотите удалить, например: $ this.removeClass ('btn-success').В приведенной ниже ссылке я сделал пример.

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

       }
    })

https://codepen.io/jmejia1221/pen/qMwLQP

Answer 4

Вы должны добавить код в метод document.ready.

$(document).ready(function () {
        $('.btn').click(function () {
            var $this = $(this);
            if ($this.hasClass('btn-success')) {
                $this.removeClass().addClass('btn-simple');
            } else if ($this.hasClass('btn-simple')) {
                $this.removeClass('btn-simple').addClass('btn-success');
            }
        });
    });