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

elements with the same class name in javascript

我是 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 等等。它有效,但我发现它效率低下。你们能引导我走上正确的道路吗?

这是解决它的方法之一。捕获所有链接,然后使用 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>

首先,可以通过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>

也只是我,还是那闻起来像作业?

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>

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

检查元素是否是我们要查找的元素类型(这个检查可能会根据页面的实际内容而变化),然后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>

疯狂,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>

更多阅读: