Изменить состояние кнопки, которая повторяется в нескольких местах на странице, но только кнопка, на которую нажимают, а не остальные - PullRequest
Новая
       19

Изменить состояние кнопки, которая повторяется в нескольких местах на странице, но только кнопка, на которую нажимают, а не остальные

0 голосов
/ 03 мая 2019

У меня есть набор кнопок, которые ведут себя как тумблер.Эта группа кнопок повторяется в разных строках внутри таблицы.Я хочу, чтобы пользователь мог нажимать на кнопку внутри этой «группы кнопок» и вызывать «активное состояние» (по-разному окрашивает его), но только для этой конкретной «группы кнопок» внутри этой конкретной строки

Любые подсказки, как этого добиться?plz help

Я уже пробовал оператор if в jquery с использованием класса, но затем возникает проблема удаления класса «btn-active» из других кнопок, чтобы иметь только одну кнопку с «btn-».активный "внутри этой группы, в частности.

$(document).ready(function() {
  $('.buttongroup-toggle').click(function(a) {
    if ($(this).hasClass(".btn-active")) {
      $(this).addClass(".btn-active");
    } else {
      $(this).addClass(".btn-active");
    }
  });

});
.btn-group button {
  background-color: $color-blue-dark;
  border: none;
  /* arch-dark blue border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
  float: left;
  /* Float the buttons side by side */
  outline: none;
  &.btn-active {
    background-color: $color-arch-blue;
    border-color: $color-arch-blue;
  }
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}

.btn-group button:first-child {
  border-radius: 8px 0px 0px 8px;
}

.btn-group button:last-child {
  border-radius: 0px 8px 8px 0px;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: lighten($color-blue-dark, 5%);
  border-color: lighten($color-blue-dark, 5%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group">
  <button class="buttongroup-toggle btn-active">No Change</button>

  <button class="buttongroup-toggle">Default Cured</button>

  <button class="buttongroup-toggle">Remove Bankruptcy</button>
</div>

Я хочу, чтобы при нажатии любой кнопки был добавлен класс "btn-active" и этот же класс был удален из остальныхкнопки, которые находятся внутри этой «группы кнопок», но только конкретно в этой группе кнопок, так что это поведение может повторяться в разных «группах кнопок», повторяемых на странице.

1 Ответ

0 голосов
/ 03 мая 2019

Я думаю, это то, чего вы пытаетесь достичь: 

$(document).ready(function() {
   $('.buttongroup-toggle').click(function(a) {
      $(this).siblings().removeClass("btn-active");
      $(this).addClass("btn-active");        
   });
});
...