Блог

Главная - Вопросы по программированию - javascript переключить отображение стиля div с помощью кнопки

javascript переключить отображение стиля div с помощью кнопки

#javascript

#javascript

Вопрос:

привет, мне было интересно, может ли кто-нибудь помочь мне разобраться, почему моя функция изменения стиля отображения по имени класса не работает, она работает для того, у кого есть ID, но не работает с использованием class?

также интересно, могу ли я изменить класс кнопок onclick с btn-красного на btn-зеленый, используя только javascript?

 window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  if (c.style.display == null || c.style.display == "none") {
    c.style.display = "block";
  } else {
    c.style.display = "none";
  }
}  
 .btn {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background: #444;
  color: #eee;
  border: 0;
  font-size: 14px;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: all 0.15s ease-in-out;
}

.btn:hover,
.btn:active {
  background-color: #555;
  color: #fff;
}

.btn-green {
  background-color: #47950d;
}

.btn-green:hover,
.btn-green:active {
  background-color: #64b820;
}

.btn-red {
  background-color: #b3353c;
}

.btn-red:hover,
.btn-red:active {
  background-color: #cb575b;
}  
 <button id="display1" class="btn btn-red" onclick="toggleDisplayByID('hud-popup-overlay')">Toggle div 1</button>
<button id="display2" class="btn btn-red" onclick="toggleDisplayByID('hud-leaderboard')">Toggle div 2</button>
<button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-righ')">Toggle div 3</button>
<button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('hud-bottom-left')">Toggle div 4</button>

<div id="hud-popup-overlay">
  <p>
    Something Here 1
  </p>
</div>

<div id="hud-leaderboard">
  <p>
    Something Here 2
  </p>
</div>

<div class="hud-bottom-righ">
  <p>
    Something Here 3
  </p>
</div>

<div class="hud-bottom-left">
  <p>
    Something Here 4
  </p>
</div>

Комментарии:

1. getElementsByClassName() возвращает коллекцию элементов, вам нужно будет выполнить цикл / итерацию по списку узлов / коллекции, подсказка находится в getElement S

2. getElementById — это один элемент, но getElementsByClassName — это несколько элементов.

Ответ №1:

Две вещи:

  • Ваше имя класса для четвертого элемента было неверным в HTML
  • Внутри вашей второй функции была неопределенная переменная

Вы имеете дело не с одним элементом, когда вы getElementsByClassName() . Просмотрите список и установите свой стиль.

Я изменил параметры toggleDisplayById и toggleDisplayByClass, чтобы они могли включать идентификатор элемента кнопок. Внутри каждой из этих функций они получают элемент button с помощью:

 var b = document.getElementById(btnId);

Кроме того, я создал вспомогательную функцию, которая удаляет и добавляет стили:

 function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }
  

 window.toggleDisplayByID = function(btnId,id) {

      var e = document.getElementById(id);
      var b = document.getElementById(btnId);
      if (e.style.display == null || e.style.display == "none") {
        e.style.display = "block";
        removeAndAddClass(b,'btn-green','btn-red');
      } else {
        e.style.display = "none";
        removeAndAddClass(b,'btn-red','btn-green');
      }
    }

    window.toggleDisplayByClass = function(btnId,className) {
      var c2 = Array.from(document.getElementsByClassName(className));            
      var b = document.getElementById(btnId);
      
      if(b.classList.contains('btn-red')){
        removeAndAddClass(b,'btn-red','btn-green');
      }else{
        removeAndAddClass(b,'btn-green','btn-red');
      }
      c2.forEach(c => {
        if (c.style.display == null || c.style.display == "none") {
          c.style.display = "block";
        } else {
          c.style.display = "none";
        }
      });
    }
 function removeAndAddClass(element,removeClass,addClass){
    element.classList.remove(removeClass);
    element.classList.add(addClass);
 }  
   .btn {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background: #444;
      color: #eee;
      border: 0;
      font-size: 14px;
      vertical-align: top;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      transition: all 0.15s ease-in-out;
    }

    .btn:hover,
    .btn:active {
      background-color: #555;
      color: #fff;
    }

    .btn-green {
      background-color: #47950d;
    }

    .btn-green:hover,
    .btn-green:active {
      background-color: #64b820;
    }

    .btn-red {
      background-color: #b3353c;
    }

    .btn-red:hover,
    .btn-red:active {
      background-color: #cb575b;
    }  
     <button id="display1" class="btn btn-red" onclick="toggleDisplayByID('display1','hud-popup-overlay')">Toggle div 1</button>
    <button id="display2" class="btn btn-red" onclick="toggleDisplayByID('display2','hud-leaderboard')">Toggle div 2</button>
    <button id="display3" class="btn btn-red" onclick="toggleDisplayByClass('display3','hud-bottom-righ')">Toggle div 3</button>
    <button id="display4" class="btn btn-red" onclick="toggleDisplayByClass('display4','hud-bottom-left')">Toggle div 4</button>

    <div id="hud-popup-overlay">
      <p>
        Something Here 1
      </p>
    </div>

    <div id="hud-leaderboard">
      <p>
        Something Here 2
      </p>
    </div>

    <div class="hud-bottom-righ">
      <p>
        Something Here 3
      </p>
    </div>

    <div class="hud-bottom-left">
      <p>
        Something Here 4
      </p>
    </div>

Надеюсь, это поможет,

Ответ №2:

getElementsByClassName возвращает объект, подобный массиву, поэтому вам придется его проиндексировать.

 window.toggleDisplayByID = function(id) {
  var e = document.getElementById(id);
  if (e.style.display == null || e.style.display == "none") {
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }
}

window.toggleDisplayByClass = function(className) {
  var c = document.getElementsByClassName(className);
  c.forEach(function(x) {
      if (x.style.display == null || x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
}

Ответ №3:

Что касается вашего первого вопроса, он не работает, потому что getElementsByClassName возвращает массив элементов, поэтому вам приходится перебирать их.