javascript - 重写JQ中的显示/隐藏多个Div以清除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>

但我不想将 HTML 与 JS 混合，我想使用 addEventListener。

下面是我的 JQ 代码

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

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

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

.cnt{
	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{
	padding: .9em;
	margin: .2em;
	border: 1px solid black;
  float: left;
}
#showall{
	padding: .9em;
	margin: .2em;
	border: 1px solid black;
  float: left;
}

.cnt{
	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>