Question

我正在寻找一种让我的想法发挥作用的方法。我有几个团队成员，我希望他们在我逐个点击它们时打开。

所以基本上，连续4张图片，如果我点击第一张图片，它会展开（显示以前隐藏的元素），但其他图片保持关闭状态。如果我点击第二张图片，现在第一张和第二张图片都打开了（因为我之前打开了第一张图片），但剩下的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

您需要在点击的元素上切换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/

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

1 个答案: