0

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

当存在一个按钮实例时，以下内容有效，但如果存在更多，则文本不会更改。我对通过 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>

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

4

3 回答 3

2

尝试保存对外部函数的引用$(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-29T16:49:29.880 回答
0

函数内部animate的函数失去了单击的引用.btn。

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

var btn = $(this)

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

于 2013-04-29T16:57:05.890 回答
0

我认为下面标记的行应该有 $(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 项目，并且由于有多个项目，它不知道要更改哪一个。

于 2013-04-29T16:50:43.367 回答