javascript 中具有相同 class 名称的元素

Question

我是 javascript 的新手，因为我跳过它并跳转到 jquery，现在我正在编写 javascript 代码，但我遇到了麻烦。我有多个具有相同 class 名称的元素，每个元素下面都有一个 a-tag。我想 hide/show 单击元素下方的按钮。我如何在 javascript 中执行此操作？（请不要jquery）。

HTML

<div>
 <div class="content">content 1</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
 <div class="content">content 2</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>
<div>
 <div class="content">content 3</div>
 <a class="show-more" onclick="toggleText();" href="javascript:void(0);">Show more</a>
</div>

CSS

.content {
 display: none;
}

Javascript

  var status = "less";
  function toggleText1() {
    if (status == "less") {
      document.getElementsByClassName("content")[0].style.display = 'block';
      document.getElementsByClassName("show-more")[0].innerText = "See Less";
      status1 = "more";
    } else if (status1 == "more") {
      document.getElementsByClassName("content")[0].style.display = 'none';
      document.getElementsByClassName("show-more")[0].innerText = "See More";
      status1 = "less";
    }   
  }

在我的原始代码中，我将我的内容命名为 content1、content2，并将我的 a-tag 命名为 show-more1、show-more2，然后将我的函数命名为 toggleText1、toggleText2 等等。它有效，但我发现它效率低下。你们能引导我走上正确的道路吗？

Answer 1

这是解决它的方法之一。捕获所有链接，然后使用 Array#forEach 遍历它们并将 click 事件绑定到每个元素。然后在父节点中找到 div 元素并将其 class 从隐藏切换为可见。

ES6解决方案.

var elems = document.getElementsByClassName("show-more");

Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
}));

.hidden {
  display: none;
}

<div>
  <div class="content">content 1</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 2</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 3</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>

ES5解决方案。

var elems = document.getElementsByClassName("show-more");

for (var i = 0; i < elems.length; i++){
  elems[i].addEventListener('click', function(){
    this.parentElement.getElementsByClassName('content')[0].classList.toggle('hidden');
  })
}

.hidden {
  display: none;
}

<div>
  <div class="content">content 1</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 2</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 3</div>
  <a class="show-more" href="javascript:void(0);">Show more</a>
</div>

Answer 2

首先，可以通过this作为argument/parameter在onclick中传递元素，从而知道onclick的来源。然后你得到父级并获得正确的内容 div 并使用样式元素并对显示或隐藏的内容做一些逻辑。

并且根据您的 post，您还应该默认隐藏您的内容 div。

function toggleText(aTag) {
  var content = aTag.parentNode.getElementsByClassName("content")[0];
  if(content.style.display == null || content.style.display == "none")
  {
    content.style.display = 'block';
    aTag.innerText = "See Less";
  }
  else
  {
    content.style.display = 'none';
    aTag.innerText = "See More";
  }
}

<div>
 <div class="content" style="display:none;">content 1</div>
 <a class="show-more" onclick="toggleText(this);" href="javascript:void(0)">Show more</a>
</div>
<div>
 <div class="content" style="display:none;">content 2</div>
 <a class="show-more" onclick="toggleText(this);" href="javascript:void(0)">Show more</a>
</div>
<div>
 <div class="content" style="display:none;">content 3</div>
 <a class="show-more" onclick="toggleText(this)" href="javascript:void(0)">Show more</a>
</div>

也只是我，还是那闻起来像作业？

Answer 3

var hidePrev = function(event){
  element = event.target;
  element.previousSibling.previousSibling.classList.toggle('hidden');
};

.hidden {
  display: none;
}

<div>
  <div class="content">content 1</div>
  <a class="show-more" onclick='hidePrev(event);'
  href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 2</div>
  <a class="show-more"  onclick='hidePrev(event);'
  href="javascript:void(0);">Show more</a>
</div>
<div>
  <div class="content">content 3</div>
  <a class="show-more"  onclick='hidePrev(event);'
  href="javascript:void(0);">Show more</a>
</div>

Answer 4

您还可以使用委托事件侦听器，这是分配给公共祖先元素的事件侦听器。

检查元素是否是我们要查找的元素类型（这个检查可能会根据页面的实际内容而变化），然后select上一个元素兄弟并改变显示属性和基于当前值的文本。

此示例使用粗箭头函数（在 ECMAScript 2015 语言规范中引入），但如果需要支持旧浏览器，普通函数表达式就足够了。

document.addEventListener('click', event => {
  const element = event.target
  if(event.target.classList.contains("toggle")) {
    const previous = event.target.previousElementSibling
    const text = element.textContent
    element.textContent = element.dataset.toggleText || "Show less"
    element.dataset.toggleText = text
    previous.classList.toggle('hidden')
  }
})

.hidden {
 display: none;
}

<div>
 <div class="content hidden">content 1</div>
 <a class="toggle" href="#">Show more</a>
</div>
<div>
 <div class="content hidden">content 2</div>
 <a class="toggle" href="#">Show more</a>
</div>
<div>
 <div class="content hidden">content 3</div>
 <a class="toggle" href="#">Show more</a>
</div>

Answer 5

疯狂，CSS 仅供回答 - 仅供娱乐和教育目的

这确实有一些实际应用，您可以通过向 url 添加散列来预先打开您的内容区域之一。例如 http://yourdomain/page#Content2

.content .show-less {
  display: block;
}

.content {
  display: none;
}

#content-container .content:target {
  display: block;
}

#content-container .content:target~.show-more {
  display: none;
}

<div id="content-container">
  <div>
    <div class="content" id="Content1">content 1 <a href="#content-container" class="show-less">Show Less</a></div>
    <a class="show-more" href="#Content1">Show more</a>
  </div>
  <div>
    <div class="content" id="Content2">content 2 <a href="#content-container" class="show-less">Show Less</a></div>
    <a class="show-more" href="#Content2">Show more</a>
  </div>
  <div>
    <div class="content" id="Content3">content 3 <a href="#content-container" class="show-less">Show Less</a></div>
    <a class="show-more" href="#Content3">Show more</a>
  </div>
</div>

更多阅读：

javascript 中具有相同 class 名称的元素

elements with the same class name in javascript

javascript

html

show-hide

getelementsbyclassname

classname