将 .slideToggle 与动态生成的 div 一起使用

发布于 2024-11-17 23:08:54 字数 495 浏览 12 评论 0原文

我在显示 MySQL 查询的 while 循环中创建了 div。我想用 .slideToggle 隐藏和显示它们。我不能使用一个类，因为这会触发页面上的每个特定 div 向下滑动。

我认为这会在 while 循环中重复并找到最接近的toggleSectionDyn div id。显然不是。

<div class="actions"><a href="#" id="toggleButtonDyn">Add</a></div>
<div id="toggleSectionDyn">Some content</div>
<script>
  $("#toggleButtonDyn").click(function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });
</script>

原文

I have divs created within a while loop displaying a MySQL query. I'd like to hide and show them with .slideToggle. I can't use one class as that would trigger every specific div on the page to slide down.

I thought this would repeat within the while loop and find the closest toggleSectionDyn div id. Obviously not.

<div class="actions"><a href="#" id="toggleButtonDyn">Add</a></div>
<div id="toggleSectionDyn">Some content</div>
<script>
  $("#toggleButtonDyn").click(function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放低过去 2024-11-24 23:08:54

编辑： live 已被弃用。考虑使用 .on()

你想使用

 $("#toggleButtonDyn").live('click', (function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });

.live( ) API

.live() 方法能够通过使用事件委托来影响尚未添加到 DOM 的元素：绑定到祖先元素的处理程序负责处理以下事件：触发其后代。传递给 .live() 的处理程序永远不会绑定到元素；相反，.live() 将一个特殊的处理程序绑定到 DOM 树的根。

现在，在重新阅读时，我想知道您到底在问什么。您还必须确保每个

必须具有唯一的 ID。您可能会考虑 .next('div') 而不是 .closest()

根据评论中的讨论，我会使用 .next('div') 看看修改了昨天问题中的jsfiddle http://jsfiddle.net/ycpgD/

另外，我强烈建议使用唯一ID 。如果它们不能是唯一的，则将它们分类。

EDIT: live is deprecated. consider using .on()

you want to use .live()

 $("#toggleButtonDyn").live('click', (function(){
    $(this).closest("#toggleSectionDyn").slideToggle("slow");
    return false;
  });

from the .live() api

The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation: a handler bound to an ancestor element is responsible for events that are triggered on its descendants. The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.

Now, upon re-reading, I wonder exactly what your asking. You must also make sure each <div> must have a unique ID. You may consider you .next('div') instead of .closest()

Per the discussion in comments, I would use .next('div') look at the modified jsfiddle from yesterdays question http://jsfiddle.net/ycpgD/

also, I would strongly recommend using unique ID's. if they cannot be unique make them classes.

回复收藏 0 原文

晨敛清荷 2024-11-24 23:08:54

如果你稍微重构一下，你就可以定位你想要的 div。（也许我在这里错过了这个问题，但我的解决方案非常简单）。

http://jsfiddle.net/8nXvX/

<div class="actions">
    <div><a href="#">Add</a>
        <p>Some content</p></div>
    <div><a href="#">Add</a>
        <p>Some content</p></div>
</div>

  $(".actions a").click(function(){
    $(this).next('p').slideToggle("slow");
    return false;
  });

我想这取决于你在哪里生成 < ;a>。是否要隐藏整个 MySQL 结果集，或者一次显示/隐藏每一行？

You can target the div you're after, if you refactor a little. (Maybe I'm missing the issue here, but my solution is pretty straight forward).

http://jsfiddle.net/8nXvX/

<div class="actions">
    <div><a href="#">Add</a>
        <p>Some content</p></div>
    <div><a href="#">Add</a>
        <p>Some content</p></div>
</div>

  $(".actions a").click(function(){
    $(this).next('p').slideToggle("slow");
    return false;
  });

I suppose it depends where you're generating that <a>. If it's a going to hide the entire MySQL result set, or is it going to show/hide each row one at a time?

回复收藏 0 原文

~没有更多了~