1

クリックすると詳細情報が表示され、もう一度クリックすると情報が非表示になるスクリプトがあります。問題は、クリックすると、クリックされたものだけではなく、同じクラス名を持つすべての div の情報が表示および非表示になることです。私は周りを見回していましたが、クリックされたオブジェクトにのみ影響を与えるように、「これ」をどこかに追加する必要があると思います。誰かが私が間違っていることと、この効果を達成する方法を説明できますか?

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）を$thisに置き換えます。それならうまくいくはずです。

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

thisクリック ハンドラ内でキーワードを使用します。

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

これにより、クラスを持つすべての要素にクリック ハンドラーが適用されます.toggleが、イベントを発生させた特定の要素でのみ実行されます。

于 2012-08-14T20:31:42.587 に答える
0

hiddenDivクラスで次の兄弟のスタイルを切り替えようとしているようです。

を使用して、セレクターに一致する要素の次の兄弟を取得できます.next。

$myEl.next('.hiddenDiv');

クリックされたボタンの次の兄弟を探しているのでthis、クリック ハンドラー内で使用してボタンを取得できます。

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