Question

我的问题是所有类的所有click funcion都适用。我理解正常，因为我使用了同一类。但我现在不知道如何苹果。我不想使用id caz它会是动态的。所以当我点击细节/下一步时我想要。每个只会对那个盒子产生影响。

例如

http://www.snoblife.com/snob-university/ >> PICK A CLASS! section

bellow是我的html的代码js代码。

$( ".icon-plus" ).click(function() {
$( ".traningcontent" ).slideToggle( "slow" );

});


$( ".next-step" ).click(function() {
$( ".traningcontent" ).slideToggle( "slow" );
$( ".2ndstep" ).slideToggle( "slow" );
});

demo http://jsfiddle.net/Sac5m/

Answer 1

您需要在当前单击的元素上定位元素。为此，您可以在功能中使用this键。

之后，您可以使用.find和.closest在树中导航，就像这样：

$( ".icon-plus" ).click(function() {
    var $container = $(this).closest('.traningbox');
    $container.find( ".traningcontent" ).slideToggle( "slow" );
});


$( ".next-step" ).click(function() {
    var $container = $(this).closest('.traningbox');
    $container.find( ".traningcontent" ).slideToggle( "slow" );
    $container.find( ".2ndstep" ).slideToggle( "slow" );
});

小提琴：http://jsfiddle.net/Sac5m/1/

Answer 2

你必须获得cuurent点击元素引用并slideToggle其各自的元素：

$( ".icon-plus" ).click(function() {
$(this).closest(".traningbox").find( ".traningcontent" ).slideToggle( "slow" );

});


$( ".next-step" ).click(function() {
$(this).closest(".traningbox").find( ".traningcontent" ).slideToggle( "slow" );
$(this).closest(".traningbox").find( ".2ndstep" ).slideToggle( "slow" );
});

FIDDLE DEMO

说明：

$(this)将为您提供当前点击的元素引用，然后使用closest()我们将其父元素与类trainingbox $(this).closest(".traningbox")一起使用，然后在trainingbox中我们使用{{traningcontent找到find( ".traningcontent" ) 1}}然后切换它：

$(this).closest(".traningbox").find( ".traningcontent" ).slideToggle( "slow" );

切换应用于我的所有课程

2 个答案:

说明：