Javascript jQuery函数仅在单击的元素上运行
我试图在一些内容上实现一个手风琴风格的方框。然而,在一个模板上有4-6个这样的框,出于明显的原因,它们都具有不同的类。然而,我想尝试使代码尽可能容易阅读,我不想为每个类名重复代码。我假设jQuerys(这个)方法会起作用,但我不能100%确定如何使用它 以下是我的JS代码:Javascript jQuery函数仅在单击的元素上运行,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在一些内容上实现一个手风琴风格的方框。然而,在一个模板上有4-6个这样的框,出于明显的原因,它们都具有不同的类。然而,我想尝试使代码尽可能容易阅读,我不想为每个类名重复代码。我假设jQuerys(这个)方法会起作用,但我不能100%确定如何使用它 以下是我的JS代码: <script type="text/javascript"> $(document).ready(function(){ $(".block-50_hoverHeader
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
$(文档).ready(函数(){
$(“.block-50_hoverHeader”)。单击(函数(){
//警报(“点击”);
$(“.scrollText”).slideToggle(1000);
});
});
因此.scrollText类是一个div,它保存了onClick函数之后需要显示的所有内容。但当前,当我单击标题时,页面上会显示所有.scollText div。因此,我希望它只显示在正在单击的父标题div上
以下是HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>
(图像用作背景图像)
这是头球
这是需要在完成后显示的内容
查找相对于单击的block-50\u hoverHeader
元素的滚动文本。在本例中,它是下一个兄弟,因此您可以使用.next()
在事件处理程序中,this
指向处理程序注册的元素,在本例中,它是block-50\u hoverHeader
元素,因此我们可以使用$(this.next()
查找下一个滚动文本
演示:查找相对于单击的block-50\u hoverHeader
元素的滚动文本。在本例中,它是下一个兄弟,因此您可以使用.next()
在事件处理程序中,this
指向处理程序注册的元素,在本例中,它是block-50\u hoverHeader
元素,因此我们可以使用$(this.next()
查找下一个滚动文本
演示:有很多方法可以实现这一点。我更喜欢抓取共享的父对象,然后使用find
,因为我发现由于对html结构的微小修改,这不太可能被破坏
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});
有许多方法可以实现这一点。我更喜欢抓取共享的父对象,然后使用find
,因为我发现由于对html结构的微小修改,这不太可能被破坏
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});
为什么不针对整个部门
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});
为什么不针对整个部门
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});
非常感谢。真的帮了大忙!:)非常感谢。真的帮了大忙!:)