Question

我现在正在努力工作几个小时，由于某种原因，我无法找到解决问题的方法。问题是，当我点击链接时，我需要像div一样出现的东西。那个工作到目前为止。

但主要问题是，我需要它在while循环中工作。所以我可以动态地将数据导入网格，但是所有php创建的链接都具有相同的id和所有的＆＃34; to-show-divs＆＃34;同时出现。所以我的问题是如何创建动态ID或类，以及如何让它们在javascript中工作？

echo "<div class='grid grid-pad'>";
$db=mysql_query("SELECT * FROM work") or die (mysql_error());
while($var=mysql_fetch_array($db))
{         
    echo "<div class='col-1-3'>
              <div class='content'>
                  <div id='thumb' ><img alt='$var[id]' src='$var[thumb]'/></div>
                  <div class='menu' style='display: none;'>$var[link]</div>
              </div>
          </div>";
}

echo "</div>";

<script>
    $(document).ready(function() {
        $('#thumb').click(function() {
            $('.menu').slideToggle("fast");
        });
    });
</script>

Answer 1

您可以执行注释建议的内容，或者只是创建一个迭代器变量并将其连接到id，如下所示：

$index = 0; 
while($var=mysql_fetch_array($db))
{         
    echo     "<div class='col-1-3' id='item_". $index ."'>
                <div class='content'>
                  <div id='thumb_". $index++ ."' >STUFF</div>
                   <div class='menu' style='display: none;'>$var[link]</div>
                 </div>
             </div>";
}

Answer 2

将<div id="thumb">更改为<div class="thumb">，然后使用以下jQuery：

$('.thumb').click(function() {
  $(this).next('.menu').slideToggle("fast");
});

否则，您将拥有ID＆＃34; thumb＆＃34;的多个元素，您不应该这样做。

Answer 3

由于DIV就在链接之后，你可以使用JQuery函数next（）获取链接后的下一个节点，即DIV：

$(document).ready(function() {

    $('#thumb').on('click', function(e) {
        // prevent IE from actually executing the href of the link
        e.preventDefault();
        // get next node, call the toggle.
        $(this).next().slideToggle("fast"); 
        // prevent executing of the href of the link
        return false; 
    });

});

如果您有更多这些“拇指”链接，请为我们提供一个课程而不是ID - ID必须是唯一的。

编辑：意识到实际上除了DIV之外没有链接，你可以跳过“阻止执行”的东西。

使用javascript和while循环隐藏/显示div

3 个答案: