針對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的多個類的單個實例

回答

相關問題