Question

我在一个页面上有几篇文章，我有一个加号来展开文本。我所做的代码需要更有效。只有当我有一篇文章时，此代码才有效，因为当我点击加号时，所有文章都会受到影响。

我想我的代码可以通过使用this来改进，但我不确定如何并且会预先提供一些指导和提示以便能够改进它。

<article>
<header>
    <img src="bilderGuide/bilderTips/oresundsbron.jpg" alt="Öresundsbron"/>
        <div class="articleContent">
            <div class="imageTextContainer">
            <p class="image">Some text for the image</p>
            </div>
            <h2>Headline</h2>
            <p>
            Text that are always visible....
            </p>
            <p class="extraTips1">
            Here is the hidden text
            </p>
            <!--<a id="tips1" href="#">Show the rest</a>-->
            <div class="articleContentArrow"></div>
            <div class="plus"><a href="#" id="tips1" ><img src="bilderGuide/bilderLayout/plus.png" /></a></div>
        </div>
</header>

            $("#tips1").click(function(e){
            e.preventDefault();
            $(".extraTips1").slideToggle("fast");
            var src = $('.plus img').attr('src');
            if(src == "bilderGuide/bilderLayout/plus.png") {
                $(".plus img").attr("src","bilderGuide/bilderLayout/minus.png");
                }
                else {
                $(".plus img").attr("src","bilderGuide/bilderLayout/plus.png");
                }
        });

Answer 1

首先，您需要将click事件绑定到所有文章将具有的内容。 ID是唯一的，因此#tip1已淘汰。我认为你的<div class="plus">将是一个不错的选择。

$('div.plus').click(function(e){
    e.preventDefault(); // are you sure you need this?
    var article = $(this).parents('article');
    var extras = article.find('p.extraTips1').slideToggle('fast');
    var img = article.find('.plus img');
    if(img.attr('src') == "bilderGuide/bilderLayout/plus.png") {
        img.attr('src','bilderGuide/bilderLayout/minus.png');
    }
    else {
        img.attr('src','bilderGuide/bilderLayout/plus.png');
    }
});

当事件传递时，this引用HTML元素，而不是jQuery元素。我们首先要做的是获取基本容器元素并缓存它。每当我们需要在文章中找到一个元素时，它会搜索更小的元素子集 - 这样更有效，并且允许您对多篇文章使用相同的事件。

Answer 2

这样的事情：

var path = 'bilderGuide/bilderLayout/';

$(".expand").click(function (e) {
    e.preventDefault();
    $(this).prev().slideToggle("fast");
    var src = $(this).next(".plus img").attr('src');
    if (src == path + "plus.png") {
        $(this).next(".plus img").attr("src", path + "minus.png");
    } else {
        $(this).next(".plus img").attr("src", path + "plus.png");
    }
});

<强> FIDDLE

Answer 3

正如您所提到的，您的页面中有很多文章。您应该为每个元素使用不同的id。因此，您可以使用selectors将事件绑定到元素。尝试：

$("a[id^=tips]").click(function(e){
            e.preventDefault();
            $(this).parent().siblings("p.extraTips1").slideToggle("fast");
            var src = $('.plus img').attr('src');
            if(src == "bilderGuide/bilderLayout/plus.png") {
                $(".plus img").attr("src","bilderGuide/bilderLayout/minus.png");
                }
                else {
                $(".plus img").attr("src","bilderGuide/bilderLayout/plus.png");
                }
        });

DEMO

如何使用它来改进和简化代码

3 个答案: