只影响元素的这个实例的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事件

回答

相关问题