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多個元素相同的功能，一次一個

回答

相關問題