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 解决方案。

＆＃13;

＆＃13;

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

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

ES5 解决方案。

＆＃13;

＆＃13;

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');
  })
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，您可以使用this作为参数/参数来传递onclick中的元素，以了解on点击的来源。然后你得到父亲并获得正确的内容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回答 - 仅用于娱乐和教育目的

这确实有一些实际应用程序，您可以通过向网址添加哈希来预先打开您的一个内容区域。 E.g 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