社区首页 >问答首页 >以单个类函数为目标，而不是整个类组

问以单个类函数为目标，而不是整个类组
EN

Stack Overflow用户

提问于 2012-08-14 20:28:54

回答 3查看 151关注 0票数 1

我有一个脚本，当点击时显示更多的信息，当再次点击时，它隐藏了信息。问题是，当单击时，它会显示和隐藏具有相同类名的所有div的信息，而不仅仅是被单击的那个div。我环顾四周，我想我需要在它的某个地方添加"this“，这样它就只影响被单击的对象。有没有人能解释一下我做错了什么，以及如何达到这个效果？

Javascript

 <script type="text/javascript"> 
   this$(document).ready(function(){
   $(".toggle").click(function(){
      $(".hiddenDiv").slideToggle("slow");
        });
   });
  </script>

HTML

       <span class="toggle" onClick='return false'>
            <h4 class='arrow'>Group Health Insurance</h4>
        </span>

        <div class='hiddenDiv'>
            <p><img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" />Group health insurance coverage is a policy that is purchased by an employer and is offered to eligible employees of the company blah blah blah</p>
        </div>
        <hr />
        <span class="toggle" onClick='return false'>
            <h4 class='arrow'>Insurance</h4>
        </span>

        <div class='hiddenDiv'>
            <p><img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" />More info about other types of insurance blah blah blah</p>
        </div>
        <hr />

提前感谢您的帮助！

javascript

jquery

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-08-14 20:35:41

看起来您正在尝试使用hiddenDiv类切换下一个同级的样式。

可以使用.next获取与选择器匹配的元素的下一个同级元素

$myEl.next('.hiddenDiv');

由于您要查找所单击按钮的下一个同级按钮，因此可以在单击处理程序中使用this来获取该按钮。

$(document).ready(function(){
    $(".toggle").click(function(){
        $(this).next(".hiddenDiv").slideToggle("slow");
    });
});

票数 0

Stack Overflow用户

发布于 2012-08-14 20:31:43

在单击处理程序中使用关键字this。

<script type="text/javascript"> 
   $(document).ready(function(){
   $(".toggle").click(function(){
      $(this).slideToggle("slow");
        });
   });
  </script>

这会将单击处理程序应用于具有类.toggle的所有元素，但只在导致事件的特定元素上执行。

票数 0

Stack Overflow用户

发布于 2012-08-14 20:34:53

只需用这个替换脚本即可。如果不起作用，将$(this)替换为$this。那么它应该可以工作了。

    <script type="text/javascript"> 
       $(document).ready(function(){
            $(".toggle").click(function(){
                 $(this).next().slideToggle("slow");
            });
       });
    </script>