1

我有一个脚本，单击时会显示更多信息，再次单击时会隐藏信息。问题是，当单击它时，它会显示和隐藏所有具有相同类名的 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 />

提前感谢您的帮助！

4

3 回答 3

0

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

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

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

于 2012-08-14T20:31:42.587 回答
0

只需用这个替换脚本。如果它不起作用，请将 $(this) 替换为 $this。它应该工作。

    <script type="text/javascript"> 
       $(document).ready(function(){
            $(".toggle").click(function(){
                 $(this).next().slideToggle("slow");
            });
       });
    </script>
于 2012-08-14T20:34:53.100 回答
0

看起来您正在尝试使用hiddenDiv该类切换下一个兄弟姐妹的样式。

您可以使用以下方法获取与选择器匹配的元素的下一个兄弟.next：

$myEl.next('.hiddenDiv');

由于您正在寻找被点击按钮的下一个兄弟，您可以this在点击处理程序中使用来获取该按钮。

$(document).ready(function(){
    $(".toggle").click(function(){
        $(this).next(".hiddenDiv").slideToggle("slow");
    });
});
于 2012-08-14T20:35:41.090 回答