如果有更多具有相同類的div，則將JavaScript函數應用於1 div

Question

我正在嘗試為用戶提供一個簡單的時間表。 當他們單擊日期時，應該有某種“手風琴”系統可以顯示下來並提供更多信息。 當他們再次單擊它時，“手風琴”再次關閉。

我提供了一些圖片，使其更加清晰：

和：

第一張圖片顯示用戶進入頁面時所看到的內容，第二張圖片顯示用戶單擊其中一個元素時所看到的內容。

目前的問題是， 當他單擊1天時，將顯示所有信息 。 我不知道如何獲取某種索引，因此僅在特定的日子顯示其隱藏的信息。

目前，我有以下代碼：

JavaScript的

        $counter=1;
        $(document).ready(function(){
          $(".tijdlineElement").click(function(){

            $(".tijdlineElementHidden").slideToggle("slow");

            if($counter == 1){
            getElementsByClassName("tijdlineElementHidden").style.display = "block";
            $counter = 2
            }
            else{
         getElementByClass("tijdlineElementHidden").style.display = "none";

            $counter =1
            }
          });
        });

和PHP賺1天：

    echo "<div class='tijdlineElement'>";
echo "<div class='tijdlineP2Element' >" . $topic['Uur']."<br /><br />" . $topic['Beschrijving'] . "</div>";

echo "<div class='tijdlinePElement'>". $newDate . '<br />'. $newDate1 . ' '. $newDate1a . '<br />' . $newDate2 ."</div>";
echo "<img src='images/meerFase1.png'/>";


echo "</div>";
echo "<div class='tijdlineElementHidden' style='display:none;'>";
echo "<div class='tijdlineP2Element'>" . $topic['LangeBeschrijving'] . "</div>";
echo "<div class='tijdlinePElement'></div>";
echo "</div><br />";

問題是，當用戶單擊一個日期時，其他日期的所有信息也會被顯示出來。

所以我的問題是： 我怎樣才能訪問該特定的div，所以只顯示所選div中的信息？

Answer 1

通過使用$(".tijdlineElement").click(function(){ }使用當前代碼，您將觸發該類所有元素的click事件。您可以使用.each()和$(this)將其范圍限制為當前單擊的元素。

$(".tijdlineElement").each(function(){
   $(this).on({
       click:function()
       {
           $(this).slideToggle("slow");
           // other click function stuff
       }
   });
});

快速演示：

http://jsfiddle.net/9v2D5/

更新的演示：

http://jsfiddle.net/9v2D5/25/

Answer 2

嘗試這個：

var parent = $( this );
$( ".tijdlineElementHidden", parent ).slideToggle("slow");

它應僅將屬於子級的“ tijdlineElementHidden” div切換到所單擊的元素。

Answer 3

遍歷共享相同類名的所有元素，然后添加IE8的addEventListener或attachEvent 。 （本機JS解決方案）

var elements = document.querySelectorAll(".tijdlineElement");
var i = 0, length = elements.length;
for (i; i < length; i++) {
    if (document.addEventListener) {
        elements[i].addEventListener("click", function() {
            var element = this;
        });
    } else { // IE8 support
        elements[i].attachEvent("onclick", function() {
            var element = elements[i];
        });
    };
};

Answer 4

而不是引用該類，而是使用$（this）來引用它：

 $(".tijdlineElement").click(function(){

   $(this).find(".tijdlineElementHidden").slideToggle("slow");
   .....the rest of the code...
 }