Question

非常感谢您对我的帮助。您让我觉得自己在做什么，所以我以我认为不错的方式缩短了代码，但在代码很长但现在可以正常工作之前，简短但即使没有错误也不能与第一个面板一起使用。环？因此html如下所示：

<div class="container">
   <div class="down sound">
       <img id="batman" class="image-1-panel active" src="flash.svg">
       <img class="image-2-panel notactive" src="http://cdn.playbuzz.com/cdn/3c096341-2a6c-4ae6-bb76-3973445cfbcf/6b938520-4962-403a-9ce3-7bf298918cad.jpg">
       <p class="image-3-panel notactive">Bane</p>
       <p>Joker</p>
       <p>Alfred</p>
   </div>

然后重复3个以上类似的容器。在激活和不激活的CSS上，我有：

.notactive{
      visibility: hidden;
      position: relative;
  }

  .active{
      position: absolute;

  }

在js中：

document.querySelector('#batman').addEventListener('click', batman);
function batman(){
    document.querySelector('.image-1-panel').classList.toggle('.notactive');
    document.querySelector('.image-1-panel').classList.toggle('.active');
    document.querySelector('.image-2-panel').classList.toggle('.active');
    document.querySelector('.image-2-panel').classList.toggle('.notactive');
}

但是什么也没发生...我也有一个for循环，声音效果仍然很好，但是面板没有动。有人可以在这里分享一些灯光吗？我以为是一个循环，然后在函数之后尝试它，但是也没有那么清楚地工作，我丢失了某些东西，也许是我尝试捕捉的错误元素？上面我有我的问题，没有编辑，您可以在其中理解我的意思。谢谢您的帮助

我有4个面板。在每个面板中，将有3张图像/文字一个在另一个之上。因此，当我按面板1，面板2、3和4来显示图像时，它将起作用。按面板2，然后按面板1,3和4将显示不同的图像。其余的面板都这样。因此，我开始为第一个面板创建一个函数。它有效，但是有什么方法可以使它简单？这是代码：

function guessWho(){
    document.querySelector('.image-1-panel').classList.toggle('notactive');
    document.querySelector('.image-1-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('notactive');
    document.querySelector('.image-3-panel').classList.toggle('active');
    document.querySelector('.image-3-panel').classList.toggle('notactive');
    document.querySelector('.image-4-panel').classList.toggle('active');
    document.querySelector('.image-4-panel').classList.toggle('notactive1');
    document.querySelector('.image-5-panel').classList.toggle('active');
    document.querySelector('.image-5-panel').classList.toggle('notactive');
    document.querySelector('.image-6-panel').classList.toggle('active');
    document.querySelector('.image-6-panel').classList.toggle('notactive2');
    document.querySelector('.image-7-panel').classList.toggle('active');
    document.querySelector('.image-7-panel').classList.toggle('notactive');
    document.querySelector('.image-8-panel').classList.toggle('active');
    document.querySelector('.image-8-panel').classList.toggle('notactive3');
}

有什么办法可以让我这么简单吗？我不想使用任何框架，因此它必须是纯js。谢谢

Answer 1

使用循环。

for (var i = 0; i <= 8; i++) {
    document.querySelector(`.image-${i}-panel`).classList.toggle('notactive');
    document.querySelector(`.image-${i}-panel`).classList.toggle('active');
}

Answer 2

鉴于querySelector接受字符串，您可以在循环内部构建该字符串，并在字符串内部使用迭代器。像

for(i = 1; i <= 8; i++) {
    document.querySelector('.image-' + i + '-panel').classList.toggle('notactive');
}

将为具有image-x-panel的所有内容切换“非活动”类。

Answer 3

解决方案1

for (var i = 1; i <= 8; i++) {
    document.querySelector(`.image-${i}-panel`).classList.toggle('notactive');
    document.querySelector(`.image-${i}-panel`).classList.toggle('active');
}

解决方案2

向您的HTML中添加一些CSS类，例如CLASSNAME

并尝试使用

document.querySelector(`CLASSNAME`).classList.toggle('notactive');
document.querySelector(`CLASSNAME`).classList.toggle('active');

Answer 4

您可以创建要修改其类的新状态的列表。在这种情况下，您将拥有一个如下所示的对象： {a：false，i：“”}

其中a是它是否处于活动状态，而i是您的上课时间增量，例如“ notactive2”。

然后，您创建一个嵌套循环，在其中循环遍历每个数字两次，并检查状态列表中的位置，以确定将哪些内容添加到基本“活动”类中。

 var activeClassesList = [{a:false,i:""},{a:true,i:""},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"1"},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"2"},{a:true,i:""},{a:false,i:""},{a:true,i:""},{a:false,i:"3"}];

var imageClassPrefix = ".image-";
var imageClassPostfix = "-panel";
var start =1;
var base = 8;
for (var i=0;i<2;i++)
 {
   var count = 1;
   for (var j=start;j<(start+base);j++) {

      var modifier = activeClassesList[j-1];
      var cls = (modifier.a ? "" : "not") + "active" + modifier.i;
      document.querySelector(imageClassPrefix + String(count) +  imageClassPostfix).classList.toggle(cls);
      count++;

   }
   start = start + base;
   
 }

Answer 5

另一种方法可能是只关注结果，因此我们可以删除每个图像面板的第一个选择器，因为它们会立即被覆盖。

剩下每个选择器的第二个查询。可以通过在queryselectorAll内组合多个选择器来简化具有相同类的项目的选择。

props.constructor.state

function guessWho(){

    document.querySelector('.image-1-panel').classList.toggle('active');
    document.querySelector('.image-2-panel').classList.toggle('notactive');
    document.querySelectorAll('.image-3-panel, .image-5-panel, .image-7-panel, .image-7-panel').forEach((f)=>{f.classList.toggle('notactive');})
    document.querySelector('.image-4-panel').classList.toggle('notactive1');
    document.querySelector('.image-6-panel').classList.toggle('notactive2');
}

guessWho();

.allpanels > div {display: inline-block;border:solid 1px black;height:50px;width:50px;margin:8px;}
.active { background-color:red;}
.notactive { background-color:lightsteelblue;}
.notactive1 { background-color:green;}
.notactive2 { background-color:orange;}

切换许多班

5 个答案: