仅将函数应用于一个div类，而不是全部

编程问答 2022-04-26

问题描述

| 我目前正在网站上的位置页面上工作，但无法显示/隐藏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,+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元素     
divdiv一个不是不是不是全部全部函数函数函数应用于应用于