Javascript多個元素具有相同的功能，一次

Question

我正在尋找一種使我的想法可行的方法。 我有幾個團隊成員，當我一一單擊它們時，我希望他們打開。

因此，基本上，連續四張圖片，如果我單擊第一張圖片，它將展開（顯示以前隱藏的元素），而其他圖片保持關閉狀態。 如果我單擊第二張圖片，則現在第一張和第二張圖片都是打開的（因為我以前打開過第一張圖片），但是其余的2張仍然關閉。

我想用一個函數來實現，因為我想保持代碼干凈。 我做了單獨的功能，為所有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>

Answer 1

請避免：

• 干–不要重復自己
• 使用onclick運行內聯JavaScript

您需要在單擊的元素上切換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/