2

如果我在转发器中有一个 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 有效。我究竟做错了什么？？

4

5 回答 5

3

尝试为这些 div 使用一个类，例如：

<div id="effect" class="effect ui-widget-content ui-corner-all">

并在 jquery 中使用 ("div.effect") 选择器。

我“认为”对多个事物使用相同的 id 可能会导致问题...

于 2009-10-17T16:17:28.100 回答
2

idHTML 元素的值在整个文档中必须是唯一的。您对id转发器显示的每个项目使用相同的值，这违反了该规则。现在，网络就是这样，您的浏览器不会对此抱怨，而是尝试通过验证器运行您呈现的 HTML 。jQuery 只作用于第一个这样的元素，因为它希望只有一个。

如果你从 切换id到class，你应该有更好的结果。

于 2009-10-17T16:23:34.770 回答
0

如果您不想在中继器中嵌套的那些 div 上使用类，则可以使用部分 ID 匹配。即使中继器会在每个 div 的 ID 开头添加信息（以确保它是唯一的），该 ID 仍将以“效果”或您使用的任何名称结尾。

你可以利用它来发挥你的优势。在您对“效果”ID 进行操作的 jQuery 代码中，将您的代码更改为：

$("#effect")

对此：

$("[id$='effect']")

这将选择 ID END 在“效果”中的所有元素，因此当转发器将每个 div 的 ID 重命名为“repItems_ctl001_效果”或你有什么时，jQuery 仍然会找到它。

另请注意，在您的问题中列出的 jQuery 代码末尾，您正在尝试基于类“效果”而不是 ID 访问 div。仅供参考。

于 2009-10-17T20:44:00.283 回答
0

我认为您需要更改的是附加单击事件的“就绪”功能 - 您使用 $('div.effect') 作为选择器，这对我来说看起来无效。我建议使用 $('.ui-widget-content')。这基于类而不是 id 进行选择（正如其他人所指出的那样，它应该是唯一的）。

于 2009-10-17T18:56:38.713 回答
0

另一个要考虑的想法是在中继器周围放置一个带有 id 的 div 标签。中继器本身看起来非常简单，并且查看您的 jquery，似乎单击中继器中的哪个 div 标签并不重要。

    $(document).ready(function() {
  $("#base").click(function() {
  runEffect();
  return false;
    });
});



<div id="base">
    <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>
于 2009-10-17T16:44:45.210 回答