Как добавить и удалить активный класс между двумя кнопками в списке? - PullRequest
Новая
       0

Как добавить и удалить активный класс между двумя кнопками в списке?

0 голосов
/ 08 мая 2020

Я хочу добавить активный класс на эти кнопки, и нажатие на любую из них должно удалить класс из другого 

<ul class="SectionTitle--list">
  <li>
    <button class="js-sorttoggle " data-sortkey="year" type="button">
        By Birthyear
    </button>
  </li>
  <li>
    <button class="js-sorttoggle " data-sortkey="lastname" type="button">
        By Last Name
    </button>
  </li>
</ul>

Ответы [ 5 ]

1 голос
/ 08 мая 2020

Начните с единицы (lastName например), затем используйте .toggleClass(): 

$("button.js-sorttoggle").not(".active").on("click", function() {
  $("button.js-sorttoggle").toggleClass("active");
});
.active {
  color: red;
}
<html>

<body>

  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

  <ul class="SectionTitle--list">
    <li>
      <button class="js-sorttoggle " data-sortkey="year" type="button">
        By Birthyear
      </button>
    </li>
    <li>
      <button class="js-sorttoggle active" data-sortkey="lastname" type="button">
        By Last Name
      </button>
    </li>
  </ul>
</body>
</html>
1 голос
/ 08 мая 2020

Мы можем удалить все остальные кнопки active класс, только добавив active к нажатой. Коды, как показано ниже: 

<ul class="SectionTitle--list">
    <li>
      <button onclick="toggleActive(event)" class="js-sorttoggle" data-sortkey="year" type="button">
        By Birthyear
      </button>
    </li>
    <li>
      <button onclick="toggleActive(event)" class="js-sorttoggle " data-sortkey="lastname" type="button">
        By Last Name
      </button>
    </li>
  </ul>
  <script>
    function toggleActive(event) {
      var target = event.target || event.srcElement;
      var buttonList = document.querySelectorAll(".js-sorttoggle");
      buttonList.forEach(function(button) {
        if (button === target && !button.classList.contains("active")) {
          return button.classList.add("active");
        }
        return button.classList.remove("active");
      });
    }
  </script>

Вы можете попробовать. По любым вопросам, пожалуйста, свяжитесь со мной.

1 голос
/ 08 мая 2020

Вам нужно прослушать событие click, а затем использовать HTML элемент classList , чтобы добавить или удалить свой .active класс. 

(() => {

  let activeEL;

  document.querySelectorAll('button').forEach(e => {
    e.addEventListener('click', onButtonClick)
  });

  function onButtonClick(e) {
    if (activeEL) {
      if (activeEL != e.currentTarget) {
        activeEL.classList.remove('active');
      }
    }

    activeEL = e.currentTarget;
    activeEL.classList.add('active');
  }

})();
.active {
  background: blue;
  color: #fff;
  box-shadow: none;
  outline: none;
}
<ul class="SectionTitle--list">
  <li>
    <button class="js-sorttoggle " data-sortkey="year" type="button">
            By Birthyear
            </button>
  </li>
  <li>
    <button class="js-sorttoggle " data-sortkey="lastname" type="button">
            By Last Name
            </button>
  </li>
</ul>
1 голос
/ 08 мая 2020 

var buttons = document.getElementsByTagName("BUTTON");
buttons[0].addEventListener("click", toogleClass);
buttons[1].addEventListener("click", toogleClass);

function toogleClass() {

  buttons[0].className = (this.getAttribute("data-sortkey") == "year") ? "js-sorttoggle active" : "js-sorttoggle";
  buttons[1].className = (this.getAttribute("data-sortkey") == "lastname") ? "js-sorttoggle active" : "js-sorttoggle";

}
<html>

<body>
  <ul class="SectionTitle--list">
    <li>
      <button class="js-sorttoggle " data-sortkey="year" type="button">
            By Birthyear
            </button>
    </li>
    <li>
      <button class="js-sorttoggle " data-sortkey="lastname" type="button">
            By Last Name
            </button>
    </li>
  </ul>
</body>

</html>
1 голос
/ 08 мая 2020

Я думаю, вам может понадобиться что-то вроде этого для удаления определенного класса первой кнопки при нажатии на вторую кнопку: 

<html>    
<body>
  <ul class="SectionTitle--list">
    <li>
      <button id="btn1" class="active js-sorttoggle " data-sortkey="year" type="button">
            By Birthyear
            </button>
    </li>
    <li>
      <button id="btn2" class="js-sorttoggle " data-sortkey="lastname" type="button" onclick="func2()">
            By Last Name
            </button>
    </li>
  </ul>
  <script src="source.js"></script> 
</body>
</html>

function func2() {
    var element = document.getElementById("btn1");
    element.classList.remove("active");
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...