重寫顯示/隱藏多個Div表格JQ清除JS

Question

我在JQuery中編寫了腳本，但我想用清晰的JS編寫腳本。

我可以解決我的問題，如果我要去的HTML代碼中使用onclick事件，例如：

var divs = ["Div1", "Div2", "Div3", "Div4"]; 
 
    var visibleDivId = null; 
 
    function divVisibility(divId) { 
 
     if(visibleDivId === divId) { 
 
     visibleDivId = null; 
 
     } else { 
 
     visibleDivId = divId; 
 
     } 
 
     hideNonVisibleDivs(); 
 
    } 
 
    function hideNonVisibleDivs() { 
 
     var i, divId, div; 
 
     for(i = 0; i < divs.length; i++) { 
 
     divId = divs[i]; 
 
     div = document.getElementById(divId); 
 
     if(visibleDivId === divId) { 
 
      div.style.display = "block"; 
 
     } else { 
 
      div.style.display = "none"; 
 
     } 
 
     } 
 
    }

.buttons a { 
 
    font-size: 16px; 
 
} 
 
.buttons a:hover { 
 
    cursor:pointer; 
 
    font-s

<div class="main_div"> 
 
<div class="buttons"> 
 
<a href="#" onclick="divVisibility('Div1');">Div1</a> | 
 
<a href="#" onclick="divVisibility('Div2');">Div2</a> | 
 
<a href="#" onclick="divVisibility('Div3');">Div3</a> | 
 
<a href="#" onclick="divVisibility('Div4');">Div4</a> 
 
</div> 
 
<div class="inner_div"> 
 
<div id="Div1">I'm Div One</div> 
 
<div id="Div2" style="display: none;">I'm Div Two</div> 
 
<div id="Div3" style="display: none;">I'm Div Three</div> 
 
<div id="Div4" style="display: none;">I'm Div Four</div> 
 
</div> 
 
</div>

但我不想跟JS混合HTML，和我想要使用addEventListener。

我的JQ編號下面

jQuery(function(){ 
 
    $('.targetDiv').hide(); 
 
    jQuery('#showall').click(function(){ 
 
       jQuery('.targetDiv').toggle(); 
 
     }); 
 
     jQuery('.showSingle').click(function(){ 
 

 
       jQuery('#div'+$(this).attr('target')).toggle(); 
 
     }); 
 
});

.showSingle{ 
 
\t padding: .9em; 
 
\t margin: .2em; 
 
\t border: 1px solid black; 
 
    float: left; 
 
} 
 
#showall{ 
 
\t padding: .9em; 
 
\t margin: .2em; 
 
\t border: 1px solid black; 
 
    float: left; 
 
} 
 

 
.cnt{ 
 
\t margin-top: 2em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
<a id="showall">All</a> 
 
<a class="showSingle" target="1">Div 1</a> 
 
<a class="showSingle" target="2">Div 2</a> 
 
<a class="showSingle" target="3">Div 3</a> 
 
<a class="showSingle" target="4">Div 4</a> 
 
</div> 
 

 
<section class="cnt"> 
 
<div id="div1" class="targetDiv">Content 1</div> 
 
<div id="div2" class="targetDiv">Content 2</div> 
 
<div id="div3" class="targetDiv">Content 3</div> 
 
<div id="div4" class="targetDiv">Content 4</div> 
 
</section>

我試圖做的問題，而是每一個解決方案是失敗了，我會非常感謝幫助

Answer 1

所以，所有的HTML事件屬性（ onclick）出來並被DOM對象引用替換，該對象引用將事件回調與.addEventListener()掛鉤。

由於您已在自己的父級中專用<a>元素，顯示其父級中的一組專用<div>元素之一。我們可以簡單地使用所點擊的<a>的索引作爲需要顯示的<div>的索引。

至於CSS，你也不應該使用單獨的樣式，而只應用或移除一個類。這更簡單，更靈活。

// Get all the <a> elements that will trigger the show/hide code 
 
var anchors = document.querySelectorAll(".buttons > a.showSingle"); 
 

 
// Convert anchors to a proper Array (so .forEach() and other Array methods work) 
 
var anchorsArray = Array.prototype.slice.call(anchors); 
 

 
// Set up each anchor with a click event handler 
 
anchorsArray.forEach(function(a){ 
 
    a.addEventListener("click", showHideDiv); 
 
}); 
 

 
// Get reference to the "show all" anchor 
 
var showAll = document.getElementById("showall"); 
 

 
// Set up click event handler for that single anchor 
 
showAll.addEventListener("click", showAllDivs); 
 

 
// Get all the <div> elements that will need to be shown or hidden 
 
var divs = document.querySelectorAll(".inner_div > div[id^='div']"); 
 

 
// Convert divs to proper array (so .forEach() and other Array methods work) 
 
var divArray = Array.prototype.slice.call(divs); 
 

 
function showHideDiv(evt) { 
 
    // Cancel the link's native click behavior 
 
    evt.preventDefault(); 
 
    evt.stopPropagation(); 
 

 
    // Hide all the divs 
 
    divArray.forEach(function(d){ 
 
    // No need to mess with individual style properties. Just apply a pre-existing class 
 
    d.classList.add("hidden"); 
 
    }); 
 
    
 
    // Show the div that was clicked using the index of the anchor 
 
    // By removing the "hide" class, the element's style goes back to 
 
    // whatever it was without that class. 
 
    divs[anchorsArray.indexOf(evt.target)].classList.remove("hidden"); 
 
} 
 

 
function showAllDivs(){ 
 
    // Show all the divs 
 
    divArray.forEach(function(d){ 
 
    // No need to mess with individual style properties. Just apply a pre-existing class 
 
    d.classList.remove("hidden"); 
 
    }); 
 
}

.buttons a { 
 
    font-size: 16px; 
 
    background-color:#aaf; 
 
    transition: .5s; 
 
} 
 
.buttons a:hover { 
 
    cursor:pointer; 
 
    background-color:#66f; 
 
    font-size: 18px; 
 
} 
 

 
/* This class will either be applied or not to take care of the visibility */ 
 
.hidden { 
 
    display:none; 
 
} 
 

 
.showSingle{ 
 
\t padding: .9em; 
 
\t margin: .2em; 
 
\t border: 1px solid black; 
 
    float: left; 
 
} 
 
#showall{ 
 
\t padding: .9em; 
 
\t margin: .2em; 
 
\t border: 1px solid black; 
 
    float: left; 
 
} 
 

 
.cnt{ 
 
\t margin-top: 2em; 
 
}

<div class="main_div"> 
 
    <div class="buttons"> 
 
    <a id="showall">All</a> 
 
    <a class="showSingle">Div 1</a> 
 
    <a class="showSingle">Div 2</a> 
 
    <a class="showSingle">Div 3</a> 
 
    <a class="showSingle">Div 4</a> 
 
    </div> 
 

 
    <section class="cnt"> 
 
    <div class="inner_div"> 
 
     <div id="div1">I'm Div One</div> 
 
     <div id="div2" class="hidden">I'm Div Two</div> 
 
     <div id="div3" class="hidden">I'm Div Three</div> 
 
     <div id="div4" class="hidden">I'm Div Four</div> 
 
    </div> 
 
    </section> 
 
</div>