Question

我正在寻找一些非jquery解决方案来切换带有点击链接和外部addEventListener的div。我基本上尽力实现它，但现在我迷失了。有人知道如何解决这个问题吗？

我的HTML代码：

<a href="#" class="switch-button" data-id="switch1">Div1</a>
<a href="#" class="switch-button" data-id="switch2">Div2</a>
<a href="#" class="switch-button" data-id="switch3">Div3</a>
<a href="#" class="switch-button" data-id="switch4">Div4</a>
<div class="switch" id="switch1" style="height: 200px; width: 200px; background: blue;"></div>
<div class="switch" id="switch2" style="height: 200px; width: 200px; background: red; display: none;"></div>
<div class="switch" id="switch3" style="height: 200px; width: 200px; background: green; display: none;"></div>
<div class="switch" id="switch4" style="height: 200px; width: 200px; background: yellow; display: none;"></div>

我基本上是想转换这个

$('.news-toggle').click(function (e) {
    var thisDataId = $(this).attr('data-id');
    $('.news-toggle-box').fadeOut(300);
    $('#' + thisDataId).delay(300).fadeIn(300);
    e.preventDefault();
});

这样的事情

window.onload = function toggleDiv(){
            var buttons = document.getElementsByClassName('switch-button');
            var divs = document.getElementsByClassName('switch');

            for(i=0; i<buttons.length; i++){
                buttons[i].addEventListener('click', function(){
                    for(j=0; j<divs.length; j++){
                        divs[j].style.display = 'none';
                    }
                    for(i=0; i<buttons.length; i++){
                        var dataID = buttons[i].getAttribute('data-id');
                        document.getElementById(dataID).style.display = 'block';
                    }

                })
            }
        }

但它无法正常工作。

非常感谢您的建议;）

Answer 1

尝试翻译jQuery并使用class es隐藏和显示<div>：

＆＃13;

var sb = document.querySelectorAll('.switch-button');
var ntb = document.querySelectorAll('.switch');
for (i = 0; i < ntb.length; i++)
  ntb[i].classList.add("hidden");
for (i = 0; i < sb.length; i++)
  sb[i].onclick = function () {
    var thisDataId = this.getAttribute('data-id');
    (function (thisDataId) {
      var ntb = document.querySelectorAll('.switch');
      for (i = 0; i < ntb.length; i++)
        ntb[i].classList.add("hidden");
      document.querySelector("#" + thisDataId).classList.remove("hidden");
    })(thisDataId);
    return false;
  }

＆＃13;

.hidden {display: none;}

＆＃13;

<a href="#" class="switch-button" data-id="switch1">Div1</a>
<a href="#" class="switch-button" data-id="switch2">Div2</a>
<a href="#" class="switch-button" data-id="switch3">Div3</a>
<a href="#" class="switch-button" data-id="switch4">Div4</a>
<div class="switch" id="switch1" style="height: 200px; width: 200px; background: blue;"></div>
<div class="switch" id="switch2" style="height: 200px; width: 200px; background: red;"></div>
<div class="switch" id="switch3" style="height: 200px; width: 200px; background: green;"></div>
<div class="switch" id="switch4" style="height: 200px; width: 200px; background: yellow;"></div>

＆＃13;

注意：我很难过，因为没有名称为.news-toggle和.news-toggle-box的课程。上帝！

Answer 2

关于您提到的Jquery，我相信您试图隐藏新闻切换框并显示与所点击的数据ID匹配的相应div。将代码更改为

window.onload = function toggleDiv(){
            var buttons = document.getElementsByClassName('switch-button');
            var divs = document.getElementsByClassName('switch');

            for(i=0; i<buttons.length; i++){
                buttons[i].addEventListener('click', function(event){
                    for(j=0; j<divs.length; j++){
                        divs[j].style.display = 'none';
                    }
                    //Get the data-id of the current div
                    var data_id=event.target.getAttribute("data-id");
                    var currentDiv=document.getElementById(data_id); 
                    currentDiv.style.display="block";
                    //Do whatever you want with your news toggle
                })
            }
        }`

根据点击的链接切换div - 普通javascript

2 个答案: