Question

我的网站上有一个meetup.com 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。有什么想法吗？

Answer 1

您必须使用this关键字和DOM遍历来定位正确的元素

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

仅供参考：<infobox>对我来说似乎是无效的标签？

Answer 2

因为你有一个非常通用的jQuery选择。 您正在切换页面中的所有P标记。

您应该做的是将每个项目包装在具有特定css类的单独div中。更新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>

现在在您的脚本中，使用showMore css类查找按钮上的click事件，单击它时，使用closest()方法获取容器div，然后使用{{1}获取要切换内容的div的方法。

find

Here是一个工作样本。

切换按钮以显示/隐藏API中的数据

2 个答案: