防止类的所有引用受到触发函数的影响

Question

我怎么能只影响+读取BIO DIV我点击并切换下面的P.bio类，而不是页面上的每个实例？我很感谢你的帮助。谢谢!

HTML：

<div class="bio-link"></div><p class="bio">This is a bio #1</p>
<div class="bio-link"></div><p class="bio">This is a bio #2</p>

jQuery：

//Bio Toggle
closebio = "- CLOSE BIO";
showbio = "+ READ BIO"
$(".bio-link").html(showbio);
$(".bio").hide();
$(".bio-link").click(function() {
    if ($(".bio").is(":hidden")) {
        $(".bio:hidden").fadeIn();
        $(".bio-link").html(closebio);
    } else {
        $(".bio").fadeOut();
        $(".bio-link").html(showbio);
    }
});

Answer 1

使用.toggle()和$(this)，如下所示：

    $(function(){
     //Bio Toggle
     closebio = "- CLOSE BIO";
     showbio = "+ READ BIO"
     $(".bio-link").html(showbio);
     $(".bio").hide();
     $(".bio-link").toggle(function() {
         $(this).html(closebio).next('.bio').fadeIn();
     },function(){    
         $(this).html(showbio).next('.bio').fadeOut();
     });      
    })

请参阅http://jsfiddle.net/MBMef/1/

Answer 2

这样做是可行的：

$(".bio-link").click(function() {
    var bio = $(this).next('p');
    if (bio.is(":hidden")) {
        bio.fadeIn();
        $(this).html(closebio);
    } else {
        bio.fadeOut();
        $(this).html(showbio);
    }
});

http://jsfiddle.net/dxVNx/1/

此外，您还应该使用var关键字声明HTML /show变量，并且不要使用缺少的分号(只是为了更好的度量/实践)。

var closebio = "- CLOSE BIO";
var showbio = "+ READ BIO";

Answer 3

您可以使用jQuery的.next()选择器；$(this).next().fadeIn();