用“这个”的幻灯片吗？

Question

我在一个网页上使用了几篇文字文章。我只是有一个简短的文字介绍，然后一个“阅读更多”的链接，以幻灯片切换其余的文章。

我试图简化我的代码，并正在寻找以某种方式使用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

给你.别再用next了

更新的例子

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

Answer 2

下面是对工作代码的修改：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演示。

参考文献：

• .find()。
• .is()。
• .on()。