针对Jquery的多个类的单个实例

我正在设计一个标题模块，单击时显示/隐藏标题。我想在动画完成后更改触发切换的按钮的文本。针对Jquery的多个类的单个实例

当按钮的一个实例存在时，下面的工作方式会存在，但如果存在更多，则文本不会更改。 ~~我没有扎实的把握在DOM中移动，我如何使用$(this)来定位活动按钮？~~

编辑：对于像我这样的其他初学者，请注意这是一个JS范围问题，而不是DOM问题。

JS：

$('.btn').click(function(){ 
    $(this).siblings('.caption').animate({ 
     height: 'toggle' 
     }, 200, function() { 
     // After animation is done: 
     if($('.btn').text() == 'Hide'){ 
     $('.btn').text('Show'); 
     } else { 
     $('.btn').text('Hide'); 
     } 
    }); 
});

HTML：

<div class="container"> 
    <ul class="slides"> 
     <li>...</li> 
    </ul> 
    <div class="caption"> 
     <p class="txt"><span class="details">...</span></p> 
    </div> 
    <div class="btn"> 
     <p class="txt">Hide</p> 
    </div> 
</div>

将不胜感激快速解释，我在做什么错。谢谢！

来源

2013-04-29 PHPeer

尝试保存到外功能$(this）的引用：

$('.btn').click(function(){ 

var self = $(this); 

self.siblings('.caption').animate({ 

    height: 'toggle' 

    }, 200, function() { 

    // After animation is done: 

    if(self.text() == 'Hide'){ 

    self.text('Show'); 

    } else { 

    self.text('Hide'); 
    } 
});

}）;

来源

2013-04-29 16:49:29

我认为下面标注的线应该有$（本），而不是$（“BTN。”）：

$('.btn').click(function(){ 
    $(this).siblings('.caption').animate({ 
     height: 'toggle' 
     }, 200, function() { 
     // After animation is done: 
     if($(this).text() == 'Hide'){ //<-- changed this line 
     $(this).text('Show');  //<-- changed this line 
     } else { 
     $(this).text('Hide');  //<-- changed this line 
     } 
    }); 
});

你现在的样子，它是选择所有.btn项目而且由于有多个，它不知道哪一个要改变。

来源

2013-04-29 16:50:43 nikeaa

功能在animate功能失去参考点击.btn这样。

要记住这个按钮是点击，只需保存在var之前的.animate()被点击的目标。

var btn = $(this)

然后，您可以通过btn访问完整功能中的按钮。

来源

2013-04-29 16:57:05

针对Jquery的多个类的单个实例

回答

相关问题