Question

我需要定位两个div元素并同时切换它们的类。

我知道我可以使用.querySelectorAll

“按ID”获得多个div

但是当我到达.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％宽度，浏览器仍然会尊重其他div空间而不是整个100％。

所以我想如果我可以在右边获得div，例如，当左边的div被切换时不显示，它将不会显示所以左div可以全部100％< / p>

也许我正在以错误的方式解决这个问题。欢迎任何帮助。感谢。

Answer 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)，然后在javascript中进行一些DOM遍历和迭代，但这有点超出范围。如果是这种情况我会推荐jQuery。

如何在同一个函数中通过id获取2个类

1 个答案: