将函数仅应用于一个div类,而不是全部 [英] Apply function to only one div class, not all
问题描述
我目前正在网站上的位置网页上工作,并且遇到显示/隐藏jquery效果的问题。下面的jQuery激活点击并应用切换div的类,以显示/隐藏它...非常简单。但是,当我添加更多的div与相同的类,并单击激活链接,它运行所有的div的函数。我知道这是一个简单的修复,但我不能弄清楚正确的语法。任何人都可以快速看看这个代码,看看我如何能解决它。我只包括下面的html divs之一。这是当我有多个,导致的问题。请参见此处的示例。
I'm currently working on a location page on a website and am having trouble with a show/hide jquery effect. The jQuery below activates on-click and applies toggles the class of a div to show/hide it... pretty straightforward. However, when I add more divs with the same class and click on the activator link, it runs the functions on all of the divs. I know this is a simple fix, but I can't figure out the right syntax. Could anyone take a quick look at this code and see about how I could fix it. I only included one of the html divs below. It's when I have more than one that causes the problem. See example here.
感谢您,
Taylor
Thanks, Taylor
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,+Suite+11+Bowie,+MD+20715&daddr=&hl=en&geocode=&mra=prev&sll=38.959741,-76.714349&sspn=0.00755,0.013422&g=16901+Melford+Blvd,+Suite+11+Bowie,+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 -->
推荐答案
如果我理解正确, .sliding与其.show-hide链接相关联的内容以切换。您可以设置jQuery上下文以找到正确的.sliding元素。这样,你不会认为元素在某个位置,并且你没有绑定到唯一的css id允许更多的灵活性。
If I understand correctly, you're wanting just the .sliding content that's associated with its .show-hide link to toggle. You can set the jQuery context to find the correct .sliding element. This way you don't assume that the element is at a certain position and you're not tied to unique css ids allowing more flexibility.
$(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");
});
});
这篇关于将函数仅应用于一个div类,而不是全部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!