Question

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

Answer 1

尝试为这些div使用类：

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

并在jquery中使用（“div.effect”）选择器。

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

Answer 2

HTML元素的id值为required to be unique across the entire document。您对转发器显示的每个项目使用相同的id值，这违反了该规则。现在，网络就是这样，您的浏览器不会抱怨，但尝试通过a validator运行呈现的HTML。 jQuery只对第一个这样的元素起作用，因为它希望只只有一个。

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

Answer 3

要考虑的另一个想法是在转发器上放置一个ID为AROUND的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>

Answer 4

我认为您需要更改的是在'ready'函数中附加click事件 - 您使用$（'div.effect'）作为选择器，这对我来说看起来不合适。我建议使用$（'。ui-widget-content'）。这基于类而不是id（其他人应该注意的唯一）来选择。

Answer 5

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

您可以利用此优势。在您的jQuery代码中，您正在使用“效果”ID进行操作，请更改以下代码：

$("#effect")

到此：

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

这将选择ID为“effect”的所有元素，因此当转发器将每个div的ID重命名为“repItems_ ctl001_ effect”或者你有什么时，jQuery仍会找到它。

另外请注意，在问题中列出的jQuery代码的末尾，您尝试根据类“效果”而不是ID来访问div。只是一个FYI。

带有动态内容的JQuery

5 个答案: