如何解决仅将函数应用于一个div类,而不是全部
| 我目前正在网站上的位置页面上工作,但无法显示/隐藏jquery效果。下面的jQuery可以激活单击并应用div的类来显示/隐藏它……非常简单。但是,当我添加更多具有相同类的div并单击激活器链接时,它将在所有div上运行功能。我知道这是一个简单的修复程序,但是我找不到正确的语法。任何人都可以快速浏览一下此代码,看看如何解决它。我只包括以下html div之一。是当我有多个导致问题的原因。请参阅此处的示例。 谢谢, 泰勒 jQuery的$(function(){
$(\".sliding\").hide();
$(\".show-hide\").show();
$(\".hide-click\").show();
$(\'.show-hide\').click(function(){
$(\".sliding\").slidetoggle(\"slow\");
$(\".hide-click\").slidetoggle(\"slow\");
});
});
的HTML
<!-- Bowie,MD -->
<div class=\"location\" style=\"margin-top: 0;\">
<!-- City Name -->
<h3><a href=\"javascript:void(0);\" class=\"show-hide\">Bowie</a></h3>
<h2>Address</h2>
<p>16901 Melford Blvd,Suite 11<br/>
Bowie,MD 20715</p>
<h2>Contact</h2>
<p><span><strong>Phone:</strong> 301.805.5395</span><br />
<span><strong>Fax:</strong> 301.805.5396</span></p>
<span class=\"hide-click\"><a href=\"javascript:void(0);\" class=\"show-hide\">View additional info</a></span>
<!-- Hidden Content -->
<div class=\"sliding\">
<h2>Map</h2>
<div class=\"map\">
<iframe width=\"211\" height=\"140\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&sll=37.0625,-95.677068&sspn=61.023673,112.236328&ie=UTF8&hq=&hnear=16901+Melford+Blvd,+Bowie,+Maryland+20715&ll=38.959742,-76.714354&spn=0.009344,0.018196&z=14&iwloc=A&output=embed\"></iframe>
</div>
<a href=\"http://maps.google.com/maps?f=d&source=s_d&saddr=16901+Melford+Blvd,+MD+20715&daddr=&hl=en&geocode=&mra=prev&sll=38.959741,-76.714349&sspn=0.00755,0.013422&g=16901+Melford+Blvd,+MD+20715&ie=UTF8&z=17\" target=\"_blank\" class=\"directions\">Get Directions</a>
<h2>Doctors</h2>
<p><a href=\"/#phillips.PHP\">William B. Phillips,II M.D.</a>,<a href=\"/#weichel.PHP\">Eric D. Weichel,M.D.</a></p>
<a href=\"javascript:void(0);\" class=\"show-hide\">Hide additional info</a>
</div>
<!-- end Hidden Content -->
</div>
<!-- end Location -->
解决方法
如果我理解正确,那么您只是想要与.show-hide链接相关联的.sliding内容进行切换。您可以设置jQuery上下文以找到正确的.sliding元素。这样,您就不会假设该元素位于某个位置,并且不会与唯一的CSS ID绑定,从而获得更大的灵活性。
$(function(){
$(\".sliding\").hide();
$(\".show-hide\").show();
$(\".hide-click\").show();
$(\'.show-hide\').click(function(){
//find the surrounding div
var location = $(this).parent().parent();
//find the correct elements within the location block
$(\".sliding\",location).slideToggle(\"slow\");
$(\".hide-click\",location).slideToggle(\"slow\");
});
});
, 您可以使用:first
或:nth-child
选择器。
请参阅JQuery文档:
http://api.jquery.com/nth-child-selector/
http://api.jquery.com/first-selector/
例:
$(\".sliding\").hide();
, 您可以给div
一个id
,然后在jQuery选择器中使用#divID
仅选择一个div
:
$(\'#divID\').hide();
ID的全部意义在于,它只能应用于页面中的一个元素,而类可以应用于任意数量的元素。
, 有两种选择:
1)使用id选择器作为$()的参数,并将id属性仅添加到所需的一个div,
<div id=\"someid\">
,然后js看起来像this12ѭ
2)使用$($()。get(N)).show()其中N是要影响的div的已知索引。不过,很难推荐这种解决方案,因为如果重新设置页面格式,它更有可能崩溃。
, 对于div,您可以使用
$(this).parents(\".sliding\").slideToggle(\"slow\")
, 我会这样做。
首先在CSS中将除第一个类别外的所有div设置为dn
设置为display:none
。
然后,您的JavaScript可以执行以下操作。
我假设您希望点击触发器始终可见。
$(function(){
$(\'.show-hide\').click(function(){
$(\".sliding\").slideUp(\"slow\");
$(this).next(\".sliding).slideDown(\"slow\");
});
});
, 例如:
$(\".sliding:eq(0)\").slideToggle(\"slow\");
将其设置为类“ .sliding”的第一个元素。
另请:如何获取第n个jQuery元素
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。