php - 为动态 div 定义一个好的隐藏/取消隐藏 jQuery 函数的问题

Question

前一段时间我使用这个简单的函数来隐藏/取消隐藏 divs':

$(document).ready(function() {
  $('#job_desc').hide();
  $('#slick-toggle').click(function() {
    $('#job_desc').toggle(400);
    return false;
  });
});

如您所见，当文档准备好时，我只是隐藏了 ID 为 job_desc 的 div，还创建了一个切换 状态的函数>div 当用户点击 ID 为 slick-toggle 的链接时。

好吧，时代变了，现在我正在使用 php 循环生成 div，例如:

while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo '<div id="job_desc['.$row["id_exp"].']">'.$job_desc.'</div>'
}

此时我卡住了，我知道我不仅需要动态生成 div，还需要为每个 div< 生成 toggle 按钮.

我真的不知道如何:

1. 更改我的 jquery 函数以便使用动态生成的 div
2. 如何在文档准备好时隐藏所有 div。

Answer 1

您可以通过使用类轻松地做到这一点(这未经测试但应该有效):

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'</div>';
}

J查询:

$(document).ready(function() {
   $('.hidable').hide();
   $('.hidable').click(function() {
    var the_id = $(this).attr('id');
   $('#'+the_id).toggle(400);
  });
});

编辑:

正如我在评论中所说，我没有看到您说您想要链接标签来切换隐藏/取消隐藏的部分。如果您的设计有必要，您可以轻松实现相同的机制，只需添加一个 return:false;或 event.preventDefault() 以避免浏览器跟随链接；无论如何，只要给它一个类和一个(唯一的)ID，然后使用前者获取后者。

我花了几分钟时间思考解决方案，但也许我不明白您真正想要的是什么。隐藏/取消隐藏所有 div 的单个？

$('.hidable').hide();
$('a#slick-toggle').click(function(){
  $('.hidable').toggle(400);
  return false;
}

或者您想要为每个 div 使用不同的链接？

更新:

不是最优雅的解决方案，但应该可行:

while($row = mysql_fetch_assoc($result))
{
  echo '<div id="job_desc'.$row['id_exp'].'" class="hidable">'.$job_desc.'<a class="slick-toggle" href="desc'.$row['id_exp'].'">toggle</a></div>';
}

J查询:

$(document).ready(function() {
    $('.hidable').hide(); // hides all divs;
    $('a.slick-toggle').click(function(){
      var the_id = $(this).attr('href');  //gets href
      var div_id = $('#job_' + the_id);  //takes the div id, which is made up with the href
      $(div_id).toggle(400);  //now can match the div
      return false;
    }
});