javascript - addEventListener 随机工作，我不知道为什么

Question

我是 javascript 的新手，我试图在按下按钮时显示不同类型的元素。 html 按钮显示 html 元素，与 bootstrap 按钮和 wordpress 按钮相同。事情是脚本随机工作。如果我有 4 个不同的元素，只有其中 2 个是 html 元素时才有效。如果我添加更多元素，有时行得通有时行不通。

<div class="botones">
    <div class="todos">
        <p>TODOS</p>
    </div>

    <div class="ht">
        <p>HTML</p>
    </div>

    <div class="wp">
        <p>WORDPRESS</p>
    </div>

    <div class="bt">
        <p>BOOTSTRAP</p>
    </div>
</div>               

<div class="content-proyec">
    <div class="sample wp-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-cocinero.jpg"></a>
        </div>
    </div>

    <div class="sample bt-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-woocommerce.jpg"></a>
        </div>
    </div>

    <div class="sample bt-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-justicia.jpg"></a>
        </div>
    </div>

    <div class="sample ht-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-jane.jpg"></a>
        </div>
    </div>
</div>

var ht = document.querySelectorAll(".ht-pro");
    var wordpress = document.querySelectorAll(".wp-pro");
    var bootstrap = document.querySelectorAll(".bt-pro");
    var proyectos = document.querySelectorAll(".sample");


document.querySelectorAll(".botones div").forEach(div => {
    div.addEventListener('click', function() {
        if (div.className == "todos"){
            for (var i = 0; i <= proyectos.length; i++){
                ht[i].style.display = "block";  
                wordpress[i].style.display = "block";           
                bootstrap[i].style.display = "block";
            }
        }

        else if(div.className == "ht"){
            for (var i = 0; i <= proyectos.length; i++){
                ht[i].style.display = "block";
                wordpress[i].style.display = "none";                
                bootstrap[i].style.display = "none";
            }
        }

        else if(div.className == "wp") {
            for (var i = 0; i <= proyectos.length; i++){
                ht[i].style.display = "none";
                wordpress[i].style.display = "block";                       
                bootstrap[i].style.display = "none";
            }
        }

        else if(div.className == "bt") {
            for (var i = 0; i <= proyectos.length; i++){
                ht[i].style.display = "none";
                wordpress[i].style.display = "none";
                bootstrap[i].style.display = "block";           
            }
        }
    });
});

Answer 1

遍历所有 div 以隐藏和显示它们的代码无法维护和冗余，所有条件语句也是如此，这很快就会导致代码变得冗长。

您可以减少很多所需的 javascript 代码，并使用 CSS 来显示/隐藏您的 block

var btt = document.querySelector('.botones');
var cnt_proyec = document.querySelector('.content-proyec');

btt.addEventListener('click', function(ev) {
  if (ev.target.matches('button')) {
    cnt_proyec.dataset['current'] = ev.target.className;
  }
})

.sample {
  display: none;
}

[data-current="ht"] .ht-pro,
[data-current="wp"] .wp-pro,
[data-current="bt"] .bt-pro,
[data-current="todos"] .sample {
  display: block  ;
}

<div class="botones">
  <button class="todos">
    TODOS
  </button>

  <button class="ht">
    HTML
  </button>

  <button class="wp">
    WORDPRESS
  </button>

  <button class="bt">
    BOOTSTRAP
  </button>
</div>



<div class="content-proyec">
    <div class="sample wp-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-cocinero.jpg" alt="wp-pro"></a>
        </div>
    </div>

    <div class="sample bt-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-woocommerce.jpg" alt="bt-pro"></a>
        </div>
    </div>

    <div class="sample bt-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-justicia.jpg" alt="bt-pro"></a>
        </div>
    </div>

    <div class="sample ht-pro">
        <div class="sample-img">
            <a href=""><img src="img/proyectos/proyecto-jane.jpg" alt="ht-pro"></a>
        </div>
    </div>
</div>

首先，你应该使用真正的<button>元素而不是 div(当然，还可以根据您的喜好设置样式)也是为了可访问性。

然后您只需要在按钮包装器元素上捕获点击事件并检测被点击按钮的类名即可。

将该类名用作 data-current proyec 元素上的属性，并使用该属性通过 CSS 正确隐藏和显示 block 。