0

クリックするとキャプションを表示/非表示にするキャプション モジュールを設計しています。アニメーションが完了したら、トグルをトリガーするボタンのテキストを変更したいと思います。

以下は、ボタンのインスタンスが 1 つ存在する場合に機能しますが、複数ある場合、テキストは変更されません。DOM 内の移動についてよく理解していません$(this)。アクティブなボタンをターゲットにするにはどうすればよいですか?

編集: 私のような他の初心者の場合、これは DOM の問題ではなく、JS スコープの問題であることに注意してください。

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

0

以下でマークされた行には、$('.btn') の代わりに $(this) が必要だと思います。

$('.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 に答える
0

関数内のanimate関数は、このようにクリック.btnされた参照を失います。

どのボタンがクリックされたかを覚えておくには、クリックしたターゲットのvar前に保存します。.animate()

var btn = $(this)

その後、 を使用して完全な機能でボタンにアクセスできますbtn。

于 2013-04-29T16:57:05.890 に答える