Question

我正在设计一个标题模块，用于在点击时显示/隐藏字幕。我想在动画完成后更改触发切换按钮的文本。

当存在一个按钮实例时，下面有效，但如果有更多，则文本不会改变。 ~~我没有完全掌握在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>

希望快速解释一下我做错了什么。谢谢！

Answer 1

尝试保存对外部函数$(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');
   }
});

}）;

Answer 2

我认为下面标记的行应该是$（this）而不是$（'。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项目，因为有倍数，所以不知道要改变哪一项。

Answer 3

animate函数中的函数会丢失所点击的.btn的引用。

要记住单击按钮，只需在var点击目标之前保存.animate()即可。

var btn = $(this)

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

使用Jquery定位多个类的单个实例

3 个答案: