javascript中具有相同类名的元素

Question

我是 javascript 新手，因为我跳过它并跳转到 jquery，现在我正在编写一个 javascript 代码，但我遇到了麻烦。我有多个具有相同类名的元素，每个元素下面是一个 a-tag。我想在单击它下面的按钮时隐藏/显示元素。我怎么能在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 元素并将其类从隐藏切换为可见。

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 作为自变量/参数来传递 onclick 中的元素，以了解 on click 的来源。然后，您获取父级并获取正确的内容 div 并使用样式元素并对要显示或隐藏的内容执行一些逻辑。

根据您的帖子，您还应该默认隐藏您的内容 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

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

检查该元素是否是我们要查找的元素类型（这个检查可能会根据页面的实际内容而改变），然后选择上一个元素兄弟并根据当前值。

此示例使用粗箭头函数（在 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>

更多阅读：

• Sibling Selector
• Target Pseudo Class