切換按鈕以顯示/隱藏API數據

我在我的網站上有一個meetup.com API，用於描述事件。我希望通過切換按鈕隱藏此信息，以便在單擊「更多信息」時顯示說明。切換按鈕以顯示/隱藏API數據

這裏是我的切換按鈕的javascript：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").toggle(); 
    }); 
}); 
</script>

這裏是PHP：

$ct = 1; 
foreach ($my_array['results'] as $event) { 
    echo '<strong> ' . $event['name'] . '</strong>' . '<br />'; 
    echo '<strong>Event link: </strong><a href="' . $event['event_url'] .'" target="_blank">' . $event['event_url'] . '</a><br />'; 
    echo '<strong>When: </strong>' . date('Y-m-d H:i', $event['time']/1000) . '<br />' ; 
    // echo '<strong>More Info: </strong>' . $event['description'] . '<br />'; 
    echo '<strong><button>More Info</button></strong><infobox>' . $event['description'] . '</infobox><br />'; 

$ct = $ct+1;

這是它看起來像活：http://maddusability.com/icm505/meetups.php

正如你所看到的，它只允許我一次顯示/隱藏所有事件描述，而不是單獨顯示/隱藏 - 即使我爲每個事件創建了一個唯一的ID。有任何想法嗎？

來源

2015-12-14 HalfAsleep

什麼是id？身份證在哪裏？ – Musa

您必須使用this關鍵字和DOM遍歷來定位正確的元素

$(document).ready(function(){ 
    $("button").click(function(){ 
     $(this).closest('strong').next('infobox').find("p").toggle(); 
    }); 
});

FYI：<infobox>似乎是一個無效的標籤給我嗎？

來源

2015-12-14 22:57:03 adeneo

它得到它的工作，謝謝！ – HalfAsleep

因爲你有一個非常通用的jQuery選擇。 您正在切換頁面中的所有P標籤。

你應該做的是將每個項目包裝在一個獨立的div與特定的CSS類。更新的PHP文件，以便它會產生下面的標記

<div class="item"> 
    <strong>Event 1</strong> 
    <button class="showMore">Show more</button> 
    <div class="moreInfo"> 
    <p>Your more info description goes here</p> 
    </div> 
</div> 
<div class="item"> 
    <strong>Event 2</strong> 
    <button class="showMore">Show more</button> 
    <div class="moreInfo"> 
    <p>Your more info about event 2 description goes here</p> 
    </div> 
</div>

現在，在你的腳本，尋找click事件上的按鈕與showMore CSS類，並單擊時，使用closest()方法來獲取容器div，然後使用find方法進入具有要切換內容的div。

$(document).ready(function(){ 

    $(".moreInfo").hide(); //Hide all show more initially 

    $("button.showMore").click(function(){ 
     var _this=$(this); 
     _this.closest(".item").find(".moreInfo").toggle(); 
    }); 
});

Here是一個工作示例。

來源

2015-12-14 22:57:54 Shyju

切換按鈕以顯示/隱藏API數據

回答

相關問題