多个 jquery 选择器

Posted 2023-03-05

【中文标题】多个 jquery 选择器

【英文标题】：Multiple jquery Selectors

【发布时间】：2011-07-14 02:52:57

【问题描述】：

感谢karim79 我能够点击ImageButton 并将Jquery 高亮效果应用到不同的div

$("#btnFavorite").click(function() 
    // selector for element to highlight
    $("#theDiv").effect("highlight", , 3000);
);

现在我想将问题扩展如下。

我将ImageButtons 动态添加到网页中，我希望每次点击ImageButton 时都将效果应用于div。

     <asp:ListView ID="ListView1" runat="server">
        <layouttemplate>
            <asp:PlaceHolder id="itemPlaceholder" runat="server" />
        </layouttemplate>
        <ItemTemplate> 
        <asp:ImageButton ID="btnFavorite" runat="server" ImageUrl="~/Images/Favorite.png"/>
        </ItemTemplate>
    </asp:ListView>

在这种情况下我该怎么办？通过使用列表视图的ItemDataBound 并添加属性 喜欢

btnFavorite.Attributes.Add("onmouseclick", "doSomething") 还是什么？

我完全迷路了！

【问题讨论】：

应用一个 CssClass 并使用 $('.your-class') 为多个项目添加行为。 ID=唯一 class=多 ;)

【参考方案1】：

您可以尝试像这样更通用的选择器...

$("input[type='image']").click(function()
    $(".. related div selector ..").effect("highlight", , 3000);
);

我不知道div 和input 之间的关系，所以我不能假设选择器是什么，但是如果您发布关系或解释它，我们可以帮助您编写更准确的选择器。

值得注意的是，如果您在 DOM 加载后而不是在服务器端动态地将 ImageButtons 添加到页面，那么您可能希望使用 live 方法来附加事件。 .

$("input[type='image']").live('click', function()
    $(".. related div selector ..").effect("highlight", , 3000);
);

【讨论】：

谢谢！ 'input[id$="btnFavorite"]'（属性以选择器结尾）成功了！

【参考方案2】：

只需将名为class 的属性添加到您想要拥有此效果器功能的ImageButtons，并为其命名，例如effectMaker。然后调用相同的函数，但将选择器更改为

$(".effectMaker").click(function() 
    // selector for element to highlight
    $("#theDiv").effect("highlight", , 3000);
);

使用. 选择器后跟stringValue，您可以引用每个具有以该stringValue 为值的类的元素。

【讨论】：

但请注意，这会降低性能（这可能会或可能不会重要）。如果你必须使用类，看看你是否可以更具体地与父母 ala $("#idOfParent .effectMaker")

是的，但用户似乎是 jQuery 和 DOM 元素的新手。我认为最好不要让他的脑子里塞满太多信息。

终于有人懂了！谢谢

【参考方案3】：

有人说delegate函数比live函数好：

http://test.kingdesk.com/jquery/bind_live_delegate.php

【参考方案4】：

我不知道这是否适合你，但我所做的是：

$("#<%= ListView1.ClientID %>").find(".ImageButtonTarget").click(function() 
   ..
);

我给我的按钮控件一个独特的类来查找它，并批量解析整个列表视图。我不确定是否有一个或多个 div，但如果 div 在 listview 行中，您也可以使用 parent 的组合并 find 从 ListView 行中获取它。

这也将范围限定在 ListVIew 内；选择器不必解析整个页面来查找图像按钮，只需在列表中即可。

HTH。

【参考方案5】：

这将对“theDiv”容器内的每个“图像”类型的输入应用 effect()：

$('#theDiv').find('input[type="image"]').effect('highlight', , 3000);

或者，这将在每次输入类型图像点击时将其应用于“theDiv”：

$('input[type="image"]').click(function() 
  $('#theDiv').effect('highlight', , 3000);
);

不确定您要执行哪一个。