隻影響元素的這個實例的jQuery事件

我有多個具有相同類名的元素，理想情況下它們將是七個，所以在頁面載入時它們將被隱藏，然後我想在點擊時顯示額外的文本錨點，但只爲div的那個實例，我的jQuery代碼正在刪除隱藏在div的所有實例中，我猜測解決方案是在某處添加this。謝謝！隻影響元素的這個實例的jQuery事件

來源

2015-06-05 Julian Samarjiev

在一個相關的說明，您可能會感興趣的使用' slideToggle（）'over'.toggleClass（「hidden」）'，因爲它不那麼震撼，並且達到了相同的結果。 – j08691

好點，但是當我替換它時，似乎功能會剎車，可能不得不查看它。 thx –

似乎很好，這裏http://jsfiddle.net/j08691/ptbLg5uj/ – j08691

您需要遍歷DOM找到有關這引起該事件的一個.extra-text元素。

要做到這一點，您可以使用this關鍵字，它將引用引發click事件的元素。試試這個：

$(".show-more").click(function() { 
    $(this).closest('div').find(".extra-text").toggleClass("hidden"); 
});

來源

2015-06-05 14:45:12

擺脫回報，這是不需要的 – AmmarCSE

@AmmarCSE很好的發現，謝謝。 –

使用.prev()在這方面。

$(".show-more").click(function(e) { 
    e.preventDefault(); 
    $(this).prev().toggleClass("hidden"); 
});

Fiddle

來源

2015-06-05 14:45:04

.extra-text是同級.show-more，所以u可以使用siblings()方法來獲取相鄰兄弟元素

$(".show-more").click(function() { 
 
    $(this).siblings(".extra-text").toggleClass("hidden"); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <p>Text</p> 
 
    <p class="hidden extra-text">More text</p> 
 
    <a href="#" class="show-more">Show more..</a> 
 
</div> 
 
<div> 
 
    <p>Text</p> 
 
    <p class="hidden extra-text">More text</p> 
 
    <a href="#" class="show-more">Show more..</a> 
 
</div>

來源

2015-06-05 14:46:52

隻影響元素的這個實例的jQuery事件

回答

相關問題