Javascript多个元素相同的功能，一次一个

我正在寻找一种方法来使我的想法工作。我有几个团队成员，我希望他们能够在我逐个点击它们时打开。所以基本上，连续4张图片，如果我点击第一张图片，它展开（显示一个先前隐藏的元素），但其他图片保持关闭状态。如果我点击第二张照片，现在第一张和第二张照片都打开了（因为我之前打开了第一张照片），但其余2张照片仍然关闭。Javascript多个元素相同的功能，一次一个

我想用单个函数来实现，因为我想保持代码的干净。我做了单独的函数，为所有4个团队成员分开了元素ID，但它现在可以工作，但是现在，当我想要一次使用20个元素的代码时，这很棘手，因为我不想为每个新元素保留垃圾函数和元素会员。

目前的代码不起作用，出于某种原因，请看看。

<script> 
    function ShowText() { 
     var itemtext = document.getElementByClass('aboutusteamitemtext'); 
     var itemtitle = document.getElementByClass('aboutusteamitemimgtext'); 
     var itembg = document.getElementByClass('aboutusteamitemimgbg'); 

     if (itemtext.style.display === "block") { 
      itemtext.style.display = "none"; 
      itemtitle.style.background = "#50a8ff"; 
      itembg.style.backgroundImage = "url('http://www.blabla.com/wp-content/icons/moreinfo.png')"; 
     } else { 
      itemtext.style.display = "block"; 
      itemtitle.style.background = "#E8443D"; 
      itembg.style.backgroundImage = "url('http://www.blabla.com/wp-content/icons/hideinfo.png')"; 
     } 
    }; 
</script> 
<div class="aboutusteam"> 
    <div class="aboutusteamitem"> 
     <div class="aboutusteamitemimg" onclick="ShowText()"> 
      <img src="http://www.blabla.com/wp-content/uploads/2013/06/davefake1.jpg"> 
      <div class="aboutusteamitemimgbg"></div> 
      <div class="aboutusteamitemimgtext"> 

<h4>David Jones</h4> 
Marketing Director</div> 
     </div> 
     <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div> 
    </div> 
    <div class="aboutusteamitem"> 
     <div class="aboutusteamitemimg" onclick="ShowText()"> 
      <img src="http://www.blabla.com/wp-content/uploads/2013/06/thomasfake1.jpg"> 
      <div class="aboutusteamitemimgbg"></div> 
      <div class="aboutusteamitemimgtext"> 

<h4>Thomas Nguen</h4> 
Operations Director</div> 
     </div> 
     <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div> 
    </div> 
    <div class="aboutusteamitem"> 
     <div class="aboutusteamitemimg" onclick="ShowText()"> 
      <img src="http://www.blabla.com/wp-content/uploads/2013/06/saya2.jpg"> 
      <div class="aboutusteamitemimgbg"></div> 
      <div class="aboutusteamitemimgtext"> 

<h4>Sayaka Olivie</h4> 
Senior Designer</div> 
     </div> 
     <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div> 
    </div> 
    <div class="aboutusteamitemlast"> 
     <div class="aboutusteamitemimg" onclick="ShowText()"> 
      <img src="http://www.blabla.com/wp-content/uploads/2013/06/philfake1.jpg"> 
      <div class="aboutusteamitemimgbg"></div> 
      <div class="aboutusteamitemimgtext"> 

<h4>Phillip Ivetkovich</h4> 
Senior Designer</div> 
     </div> 
     <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div> 
    </div> 
</div>

来源

2014-06-29 Romtim

请注意它是'getElementsByClassName'。检查这个小提琴http://jsfiddle.net/r9JTG/1/ – karthikr

我忘了添加CSS，这里是完整的小提琴。 http://jsfiddle.net/r9JTG/2/ 至少现在它总是打开第一个。如何让每个人都打开相应的代码并尽可能保持代码清洁？ – Romtim

请避免：

干 - 不要重复自己
运行内嵌的JavaScript与onclick

你需要切换上点击元素的CSS类

(function() { 
    var links = Array.prototype.slice.call(document.querySelectorAll('ul li')); // CSS selector for elements that needs toggle 

    links.forEach(function (link) { 
     link.addEventListener('click', function() { 
      toggleClass('active', this); 
     }); 
    }); 

    function toggleClass(className, element) { 
     element.classList.toggle(className); 
    } 
}());

http://jsfiddle.net/LP4dp/

来源

2014-06-29 23:45:20

你好，谢谢你的回答。 http://jsfiddle.net/LP4dp/2/ - 这是更新版本，我明白如何使divnumber1成为divnumber1.active使用此代码，但我不知道如何使divnumber2成为divnumber2.active，当你点击divnumber1。你能否纠正我的代码？我想.aboutusteamitemtext成为显示：块，当你点击.aboutusteamitemimg – Romtim

错误的CSS选择器，http://jsfiddle.net/LP4dp/4/ –

在我链接的小提琴上，当你点击整个图像块（。 aboutusteamitemimg） - 它需要通过改变display：none来打开一个兄弟元素 - （.aboutusteamitemtext）。 – Romtim

Javascript多个元素相同的功能，一次一个

回答

相关问题