#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.