具有动态内容的 JQuery
如果我在中继器中有一个 div 标签，并且我想为每个 div 标签添加 jquery 效果，那么该怎么做呢？
<script type="text/javascript">
$(function() {
//run the currently selected effect
function runEffect() {
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options
//if (selectedEffect == 'scale') { options = { percent: 0 }; }
//run the effect
$("#effect").effect('explode', options, 500, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$(document).ready(function() {
$("div.effect").click(function() {
runEffect();
return false;
});
});
});
</script>
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
我尝试了上面的方法，但只有第一个 div 有效。我做错了什么？
If I had a div tag inside a repeater, and i want to add a jquery effect to every one of those div tags, how would that be done?
<script type="text/javascript">
$(function() {
//run the currently selected effect
function runEffect() {
//most effect types need no options passed by default
var options = {};
//check if it's scale, transfer, or size - they need options
//if (selectedEffect == 'scale') { options = { percent: 0 }; }
//run the effect
$("#effect").effect('explode', options, 500, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$(document).ready(function() {
$("div.effect").click(function() {
runEffect();
return false;
});
});
});
</script>
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I tried the above, but only the first div works. What am i doing wrong??
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
尝试为这些 div 使用类，例如：
并在 jquery 中使用 ("div.effect") 选择器。
我“认为”对多个事物使用相同的 id 可能会导致问题......
try using a class for those divs like:
and in jquery use ("div.effect") selector.
i "think" that using the same id for multiple things might cause the issue...
HTML 元素上的
id值为 要求在整个文档中保持唯一。您对该中继器显示的每个项目使用相同的id值，这违反了该规则。现在，网络就是这样，您的浏览器不会抱怨这一点，但请尝试通过 验证器运行渲染的 HTML 。 jQuery 只作用于第一个这样的元素，因为它期望只有一个。如果您从
id切换到class，您应该会得到更好的结果。The
idvalues on HTML elements are required to be unique across the entire document. You're using the sameidvalue for each item that that repeater displays, in violation of that rule. Now, the web being what it is, your browser doesn't complain about that, but try running your rendered HTML through a validator. jQuery only acts on the first such element, because it expects there to be only one.If you switch from
idtoclass, you should have much better results.另一个需要考虑的想法是在中继器周围放置一个带有 id 的 div 标签。中继器本身看起来非常简单，并且查看您的jquery，似乎单击中继器中的哪个 div 标签并不重要。
another idea to consider is to put a div tag with an id AROUND the repeater. the repeater itself looks pretty straightforward and looking at your jquery, it doesn't appear that it matters which of the div tags in the repeater is clicked.
我认为您需要更改的是附加点击事件的“ready”函数 - 您使用 $('div.effect') 作为选择器，这对我来说看起来无效。我建议使用 $('.ui-widget-content')。这是根据类而不是 id（正如其他人指出的那样应该是唯一的）进行选择。
I think what you need to change is in the 'ready' function where you attach the click event - you are using $('div.effect') as the selector, which does not look valid to me. I suggest using $('.ui-widget-content'). This selects based on the class, rather than the id (which should be unique as noted by others).
如果您不想在中继器中嵌套的那些 div 上使用类，则可以使用部分 ID 匹配。即使中继器会在每个 div 的 ID 开头添加信息（以确保其唯一），该 ID 仍将以“effect”或您使用的任何名称结尾。
您可以利用这一点来发挥自己的优势。在您对“effect”ID 进行操作的 jQuery 代码中，将代码从以下位置更改
为：
这将选择 ID END 在“effect”中的所有元素，因此当 Repeater 将每个 div 的 ID 重命名为“ repItems_ctl001_effect”或者你有什么，jQuery仍然会找到它。
另请注意，在问题中列出的 jQuery 代码末尾，您尝试基于类“effect”而不是 ID 访问 div。仅供参考。
If you're not wanting to use a class on those divs nested in your repeater, you can use partial ID matching. Even though the repeater will add information to beginning of your ID for each div (to ensure it's unique), the ID will still end in "effect", or whatever name you've used.
You can use this to your advantage. In your jQuery code, where you're operating on the "effect" ID, change your code from this:
to this:
This will select all elements whose ID END in "effect", so when repeater renames the ID of each div to "repItems_ ctl001_ effect" or what have you, jQuery will still find it.
Also do note, toward the end of your jQuery code listed in your question, you're attempting to access a div based on the class "effect", instead of the ID. Just an FYI.