Необходимо изменить цвет отдельных кнопок включения / выключения на моей странице после нажатия с зеленого на красный - PullRequest
Новая
       0

Необходимо изменить цвет отдельных кнопок включения / выключения на моей странице после нажатия с зеленого на красный

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

У меня есть несколько кнопок на моей веб-странице, каждая кнопка может быть включена или выключена, поэтому по умолчанию они будут зелеными (включены), но после нажатия я хочу, чтобы они были красными (выключены). Мне удалось заставить это работать, но только одна кнопка меняет цвет независимо от кнопки, на которую я нажимаю. Вот мой код 

  function toggleButton() {
    var element = document.getElementById("btn");
    element.classList.toggle("btn-off");
  }
  <div class="container">
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">A</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">B</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">C</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn" onclick="toggleButton()">D</button>
    </div>
  </div>

, а затем в моем CSS у меня есть класс 'btn-off' красного цвета.

Это работает только для первой кнопки . Если я нажму любую другую кнопку, первая кнопка все равно изменит цвет. Я знаю, что могу заставить это работать, присвоив каждой кнопке другой идентификатор и написав для каждой разные функции, но я надеюсь избежать этого повторения. Любые советы / предложения? (здесь начинающий разработчик)

Ответы [ 5 ]

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

Вот другой подход к этому. У вас не должно быть нескольких повторяющихся атрибутов id, поэтому для таргетинга я использую класс toggle-button.

Каждая кнопка начинается с класса btn-on, поскольку вы упомянули, что хотите, чтобы они были включены дефолт. Щелчок по одному переключит этот класс. Без него он возвращается в состояние "выключено" и обозначается красным. 

$(document).ready(function() {
  $('.toggle-button').on('click', function() {
    $(this).toggleClass('btn-on');
  });
});
.toggle-button {
  background-color: red;
}
.toggle-button.btn-on {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
  <div class="key">
    <button class="toggle-button option-btn btn-on">A</button>
  </div>
  <div class="key">
    <button class="toggle-button option-btn btn-on">B</button>
  </div>
  <div class="key">
    <button class="toggle-button option-btn btn-on">C</button>
  </div>
  <div class="key">
    <button class="toggle-button option-btn btn-on">D</button>
  </div>
</div>
0 голосов
/ 06 мая 2020

Вы можете просто сделать это на jQuery, и это решит вашу проблему. Спасибо 

 $(document).ready(function(){
    $(".option-btn").on("click",function(){
      if($(this).hasClass("btn-off")){
          $(this).addClass("btn-on");
          $(this).removeClass("btn-off");
      }else{
          $(this).removeClass("btn-on");
          $(this).addClass("btn-off");
      }
    });
 });
.btn-off{
    background-color:#EFF0F1;
}
.btn-on{
    background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
    <div class="key">
      <button id="btn" class="option-btn btn-off">A</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">B</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">C</button>
    </div>
    <div class="key">
      <button id="btn" class="option-btn btn-off">D</button>
    </div>
</div>
0 голосов
/ 06 мая 2020

проверьте следующий код:

html

<body>
    <div class="color-red" id="test-div"></div>
    <button type="button" name="test" id="test" onclick="changeColor();">Click Me!</button>
</body>

css

.color-red{
    background-color:red;
    width:100px;
    height:100px;
}
.color-blue{
    background-color:blue;
    width:100px;
    height:100px;
}

js

function changeColor(){
    document.getElementById("test-div").classList.remove('color-red');
    document.getElementById("test-div").classList.add('color-blue');
}
0 голосов
/ 06 мая 2020

Если у вас ограниченное количество кнопок, вы можете выбрать быстрый способ:

HTML: 

<div class="key">
  <button id="btn1" class="option-btn" onclick="toggleButton(1)">A</button>
</div>
<div class="key">
  <button id="btn2" class="option-btn" onclick="toggleButton(2)">B</button>
</div>
<div class="key">
  <button id="btn3" class="option-btn" onclick="toggleButton(3)">C</button>
</div>
<div class="key">
  <button id="btn4" class="option-btn" onclick="toggleButton(4)">D</button>
</div>

Javascript: 

  function toggleButton(n) {
    var element = document.getElementById('btn' + n);
    element.style.color = 'red'; //OR YOUR TOGGLE CLASS
  }

Но если у вас большое количество кнопок, вы должны создать IDS динамически в Javascript и взять идентификатор нажатой кнопки , чтобы изменить ее цвет.

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

Измените 

onclick="toggleButton()"

на 

onclick="toggleButton(this)"

, а затем измените свой метод на 

function toggleButton(button) {
    button.classList.toggle("btn-off");
  }

Частично ваша проблема заключается в том, что вы повторяете идентификаторы. Но для того, что вы делаете, вам не нужны идентификаторы, если вы передаете элемент, который был нажат.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...