2012-08-14 162 views
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 /> 

感謝您的幫助提前!

回答

0

它看起來像你想切換與hiddenDiv類下一個同級的風格。

可以使用.next得到一個選擇相匹配的元素的下一個兄弟:

$myEl.next('.hiddenDiv'); 

既然你正在尋找按鈕的下一個兄弟被點擊,就可以使用this單擊處理中獲取按鈕。

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

感謝您向我展示這一點,我仍然在學習javascirpt,但知道我需要一個在這裏,但不知道該把它放在哪裏。 – 2012-08-17 13:06:02

0

在您的點擊處理程序中使用關鍵字this

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

這適用單擊處理與類.toggle的所有元素,但只執行導致該事件的特定元素上。

0

用這個替換腳本。如果它不起作用,則將$(this)替換爲$ this。它應該工作。

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