Question

我在一个网页上使用了几篇带文字的文章。我只有一个简短的文字介绍，然后一个＆＃34;阅读更多＆＃34;链接到幻灯片切换文章的其余部分。

我试图简化我的代码，并且正在寻找以某种方式使用this的解决方案，而不是需要为每个文本块使用唯一的类或ID，而只需使用一个用于处理所有隐藏文本块的幻灯片切换的功能。我想要一些提示如何开发我的代码，如果有可能这样做的话？我不确定。

的jQuery

$(document).ready(function() {  
$(".more").click(function(){
$(this).next(".extra").slideToggle("fast");
});
});

HTML

<div class="articleContent">
    <h1>Headline 1</h1>
    <p>Text 1 <a href="#" class="more">read more....</a>
    </p>
    <p class="extra">
    Some more text to read 1
    </p>
</div>

<div class="articleContent">
    <h1>Headline 2</h1>
    <p>Text 2 <a href="#" class="more">read more....</a>
    </p>
    <p class="extra">
    Some more text to read 2
    </p>
</div>

Answer 1

这里你去......不要在这个

上使用下一个

Updated Example

 $('document').ready(function() { 
    $(".more").click(function(e){
        e.preventDefault();
        $(this).parent('p').siblings(".extra").slideToggle("fast");
    });
 });

Answer 2

这是一个带有工作代码的jsfiddle：http://jsfiddle.net/6wqsf/

JavaScript的：

$(".more").click(function () {
    $(this).parent().next(".extra").slideToggle("fast");
});

Answer 3

我建议：

$('.articleContent').on('click', function(e){
    if ($(e.target).is('.more')) {
        $(this).find('.extra').toggle();
    }
});

JS Fiddle demo

参考文献：

使用“this”滑动切换？

3 个答案: