JQuery 选择同名的孩子

发布于 2024-09-24 17:02:57 字数 739 浏览 2 评论 0原文

我有一个列表，正在使用 ASP.NET 中继器输入到我的页面中。转发器包含一个 div (divContainer)，其中包含两个 div（divTitle 和 divDetails）。我隐藏了 divDetails，只想在用户单击 divTitle 时显示它。

当在第一个 divContainer 中时，这对我来说效果很好，但生成的所有后续内容都不起作用或者会滑下第一个 divDetails。我假设这是因为中继器生成的所有元素都具有相同的 ID，因此它选择第一个。我可能只需要寻找子元素或类似的东西，但正在努力让它工作。

以下是 HTML：

<div id="divContainer">
    <div id="divTitle">Foo</div>
    <div id="divDetails" class="display:none">Foo details</div>
</div>

<div id="divContainer">
    <div id="divTitle">Foo</div>
    <div id="divDetails" class="display:none">Foo details</div>
</div>

当单击同一 divContainer 中的 divTitle 时，JQuery 脚本应该怎样显示正确的 divDetails？

感谢您的帮助。

原文

I have a list that is being fed in to my page using an ASP.NET repeaters. The repeater contains a div (divContainer) with two divs (divTitle and divDetails) inside it. I'm hiding the divDetails and only want to show it if the user click on divTitle.

This works fine for me when in the first divContainer but all subsequent ones that get generated do not work or will slide down the first divDetails. I'm assuming this is because all the elements that get generated by the repeater have the same ID so it selects the first one. I probably need to look for child elements only or something like that but am struggling to get it working.

Here's the HTML:

<div id="divContainer">
    <div id="divTitle">Foo</div>
    <div id="divDetails" class="display:none">Foo details</div>
</div>

<div id="divContainer">
    <div id="divTitle">Foo</div>
    <div id="divDetails" class="display:none">Foo details</div>
</div>

What would the JQuery script be to show the correct divDetails when divTitle withing the same divContainer is clicked?

Thanks for your help.

分享到QQ

分享到微博

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

发布评论

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

不回头走下去 2024-10-01 17:02:57

给它们提供类（ID 必须是唯一的......问题的根源），如下所示：

<div class="divContainer">
    <div class="divTitle">Foo</div>
    <div class="divDetails" style="display:none">Foo details</div>
</div>

然后通过 .find() 或 .children() 在这种情况下：

$(".divContainer").click(function() {
  $(this).find(".divDetails").toggle();
});

这里我将其打开/关闭，您也可以使用 .slideToggle() 用于动画或只是 .show( ) 如果您只想显示它，则无法切换以再次隐藏它。

Give them classes (IDs have to be unique...the root of your issue), like this:

<div class="divContainer">
    <div class="divTitle">Foo</div>
    <div class="divDetails" style="display:none">Foo details</div>
</div>

Then find the element relatively, via .find() or .children() in this case:

$(".divContainer").click(function() {
  $(this).find(".divDetails").toggle();
});

Here I'm toggling it open/closed, you could also use .slideToggle() for an animation or just .show() if you want it shown only, not toggle-able to hide it again.

回复收藏 0 原文

很酷不放纵 2024-10-01 17:02:57

演示

http://jsfiddle.net/Sfna4/

<div class="divContainer">
    <div class="divTitle">Moo</div>
    <div class="divDetails" style="display:none">Moo details</div>
</div>

<div class="divContainer">
    <div class="divTitle">Foo</div>
    <div class="divDetails" style="display:none">Foo details</div>
</div>



jQuery(function(){
    jQuery('.divTitle').bind('click',function(){
                  jQuery(this).siblings('.divDetails').slideToggle();
    });  
});

Demo

http://jsfiddle.net/Sfna4/

<div class="divContainer">
    <div class="divTitle">Moo</div>
    <div class="divDetails" style="display:none">Moo details</div>
</div>

<div class="divContainer">
    <div class="divTitle">Foo</div>
    <div class="divDetails" style="display:none">Foo details</div>
</div>



jQuery(function(){
    jQuery('.divTitle').bind('click',function(){
                  jQuery(this).siblings('.divDetails').slideToggle();
    });  
});

回复收藏 0 原文

~没有更多了~