Как я могу получить 2 класса по идентификатору внутри одной и той же функции

#javascript #css

#javascript #css

Вопрос:

Мне нужно настроить таргетинг на два элемента div и одновременно переключать их классы.

Я понимаю, что я могу получить несколько divs «по идентификатору», используя .querySelectorAll

но когда я доберусь до .classlist.toggle ("NewClassName"); того, как я могу настроить таргетинг на два класса??

Итак, вот некоторый код:

 #small-div{
    background-color:#aaaaaa;
    border: 3px solid #aaaaaa;
    padding: 0px 0px 0px 0px;
    margin: auto 10px auto auto;
    border-radius: 10px;
    overflow: auto;
}

.tobetoggled{
    width: 45%;
    float: left;
}

#small-div2{
    background-color:#aaaaaa;
    border: 3px solid #aaaaaa;
    padding: 0px 0px 0px 0px;
    margin: auto 10px auto auto;
    border-radius: 10px;
    overflow: auto;
}

.tobetoggled2{
    width: 45%;
    float: right;
}

.toggletothis{
    width: 100%;
    float: left;
    position: fixed;
    display: block;
    z-index: 100;
}

.toggletothis2{
    width: 100%;
    float: left;
    position: fixed;
    display: block;
    z-index: 100;
}

.whensmalldivistoggled{           
    display: none;

}/* when small-div is clicked, small-div toggles to class "tobetoggled" while small-div 2 simultaneously toggles to class "whensmalldivistoggled" (the display none class) */  
 <div id="container">

  <div class="tobetoggled" onclick="function()" id="small-div">
  </div> 

  <div class="tobetoggled2" onclick="separatefunction()" id="small-div2">
  </div> 

</div> <!-- end container -->

<script>
function picClicktwo() {
    document.querySelectorAll("small-div, small-div2").classList.toggle("toggletothis, whensmalldivistoggled");

}
</script>  

Итак, как вы можете видеть, один div находится справа, другой — слева, каждый из которых имеет ширину 45%. Поэтому, если я переключу один div на ширину 100%, браузер по-прежнему будет учитывать пространство другого divs вместо того, чтобы занимать все 100%.

Итак, я думаю, смогу ли я заставить div справа, например, не отображаться при переключении div слева, это будет не так, чтобы левый div мог принимать все 100%

Возможно, я делаю это неправильно. Любая помощь приветствуется. Спасибо.

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

1. Обратите внимание, что document.querySelectorAll("small-div, small-div2").classList это undefined так, потому .querySelectorAll() что возвращает список , а не отдельный элемент DOM. И если вы хотите выбрать по нужному идентификатору "#small-div, #small-div2" .

2. итак, что я прошу сделать??

3. При выборе с .querySelectorAll() помощью вам просто нужен цикл для обработки возвращаемых элементов по одному за раз .classList.toggle() .

Ответ №1:

Вы можете создать единую функцию javascript, которая устанавливает соответствующие классы для каждого элемента. Поскольку у вас есть только два элемента, это не слишком сложно.

HTML

 <div id="container">
  <div id="lefty" onclick="toggle('lefty', 'righty')">Lefty</div>
  <div id="righty" onclick="toggle('righty', 'lefty')">Righty</div>
</div>
  

JS

 function toggle(target, other)
{
    var t = document.getElementById(target);
  var o = document.getElementById(other);
    if (!t.className || t.className == "inative")
  {
    t.className = "active";
    o.className = "inactive";
  }
  else
  {
    t.className = "";
    o.className = "";
  }
}
  

CSS

 #container {
  background-color: lightgreen;
  padding: 15px 0;
}
#container div {
  color: white;
  width: 45%;
  display: inline-block;
}
#lefty {
  background-color: blue;
}
#righty {
  background-color: purple;
}
#container div.active {
  width: 90%;
}
#container div.inactive {
  display:none;
}
  

https://jsfiddle.net/dLbu9odf/1/

Это можно было бы сделать более элегантным или способным обрабатывать больше элементов с помощью чего-то вроде toggle(this) , а затем некоторого обхода и итерации DOM в javascript, но это немного выходит за рамки. Если бы это было так, я бы рекомендовал jQuery.