logo标签列表

将函数应用于一个特定的div类，而不是全部类。

jquerycsshtml
3
我目前正在网站上工作的位置页面，遇到了一个显示/隐藏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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16901+Melford+Blvd,+Suite+11+Bowie,+MD+20715&amp;sll=37.0625,-95.677068&amp;sspn=61.023673,112.236328&amp;ie=UTF8&amp;hq=&amp;hnear=16901+Melford+Blvd,+Bowie,+Maryland+20715&amp;ll=38.959742,-76.714354&amp;spn=0.009344,0.018196&amp;z=14&amp;iwloc=A&amp;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 -->
感谢大家的帮助。我在脑海中确实有正确的逻辑，并尝试使用.parent()和其他委托选择器，但@joekarl真正做到了这一点，通过查找父元素，然后从那里向下工作列表，使其特定于当前div。正是我所需要的。再次感谢大家。 - Taylor T.
7个回答
4

如果我理解正确，您希望只切换与其.show-hide链接相关的滑动内容。您可以将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");
    });
});
3
1
你可以给你的 div 添加一个 id，然后在 jQuery 选择器中使用 #divID 来仅选择那个 div：

$('#divID').hide();

ID 的整个意义在于它只能应用于页面中的一个元素，而类可以应用于任意数量的元素。

1

有两个选项：

1）使用id选择器作为$（）的参数，并仅向一个div添加id属性，

<div id="someid"> 然后js看起来像这样$("#someid").show()

2）使用$( $().get(N) ).show()，其中N是您要影响的div的已知索引。不过很难推荐此解决方案，因为如果重新格式化页面，则它更容易出现故障。

1

对于 div，您可以使用

  $(this).parents(".sliding").slideToggle("slow")
1
我会这样做。
首先，在您的CSS中，将除第一个之外的所有div设置为类dn，并将其设置为display:none。
然后，在您的JavaScript中，您可以像这样做。我假设您希望始终看到单击触发器。
$(function(){

    $('.show-hide').click(function(){

        $(".sliding").slideUp("slow");
        $(this).next(".sliding).slideDown("slow");

   });
});
0
大家好，感谢你们的回答。这个方法不可行，因为我不想它只激活页面上的第一个项目。我希望相同的脚本适用于页面上点击的其他div。请在此处查看示例：http://rgw.steadfastdesignfirm.com/#locations.php - Taylor T.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接