JQuery 的前缀选择器问题

Question

我有这些 HTML 片段：

<li class="icon iconDelete"><a href="/projects/delete/{id}/" title="Delete this test case."></a></li>
<li class="icon iconActive1"><a href="/projects/disable/{id}/" title="Disable this test case."></a></li>
<li class="icon iconActive0"><a href="/projects/enable/{id}/" title="Enable this test case."></a></li>

我

<div class="overlay" id="overlay" style="display:none;"></div>
<ul class="overlayBox" id="overlayBox">
    <li id="overlayTop"></li>
    <li id="overlayContent">
        <b id="overlayTitle">Title</b><br />
        <p id="overlayText">
        Here comes a very important message for your user.
        Turn this window off by clicking the cross.
        </p>
    </li>
    <li id="overlayBottom"></li>
</ul>

有这段 JQuery：

$(document).ready(
    $(function()
    {
        $('a[title|="Enable this "]').click(
            function()
            {
            alert(1);
            $('#overlayTitle').text('Are you sure you want to enable this item?');
            $('#overlayText').text('This will take effect for all parent items this item is assigned to.');
            $('#overlay').fadeIn('fast',function()
                {
                    $('#overlayBox').animate({'top':'160px'},500);
                });
            }
        ),
        $('a[title|="Disable this "]').click(
            function()
            {
            alert(2);
            $('#overlayTitle').text('Are you sure you want to disable this item?');
            $('#overlayText').text('This will take effect for all parent items this item is assigned to.');
            $('#overlay').fadeIn('fast',function()
                {
                    $('#overlayBox').animate({'top':'160px'},500);
                });
            }
        ),
        $('a[title|="Delete this "]').click(
            function()
            {
            alert(3);
            $('#overlayTitle').text('Are you sure you want to delete this item?');
            $('#overlayText').text('This will take effect for all parent items this item is assigned to.');
            $('#overlay').fadeIn('fast',function()
                {
                    $('#overlayBox').animate({'top':'160px'},500);
                });
            }
        );
    }
    )
);

当我单击带有 title 属性的链接之一时，jQuery 会进入所有 .click() 函数（将弹出 3 个警报），而不仅仅是用于指定的前缀选择器。

知道为什么以及如何解决这个问题吗？

谢谢！

Answer 1

我强烈建议您不要从属性的一部分中进行选择。添加特定于每个链接的类，例如 link-enabled、link-disable 和 link-delete。

然后您可以选择像 $(".link-enabled").click() 这样会导致更少的问题并且具有更好的性能。

Answer 2

我认为使用标签作为选择器是一个坏主意。您可以轻松地将类添加到所有相关元素并将其用作选择器。除此之外，我认为通过使用函数你的代码可以更短。

Answer 3

您的头衔可能会随着时间的推移而改变。我会这样做：

$('a[title]').click(function(){
  if($(this).closest("li").hasClass("iconDelete")){
    alert(1);
    //put the rest of your code
  }
  if($(this).closest("li").hasClass("iconActive1")){
    alert(2);
    //put the rest of your code
  }
  if($(this).closest("li").hasClass("iconActive0")){
    alert(2);
    //put the rest of your code
  }
});

当然，您可以将函数中的代码分开以获得更好的可读性。

希望这有帮助。干杯

PS：我建议您将不同的类放入 a 元素并按类选择它们，这是一种更“正确”的方法。

Answer 4

这里有另一个完整的解决方案：

<li class="icon iconDelete"><a href="/projects/delete/{id}/" class="delete" title="Delete this test case."></a></li>
<li class="icon iconActive1"><a href="/projects/disable/{id}/" class="disable" title="Disable this test case."></a></li>
<li class="icon iconActive0"><a href="/projects/enable/{id}/" class="enable" title="Enable this test case."></a></li>

function doAction(action){
   alert(action);
   $('#overlayTitle').text('Are you sure you want to '+action+' this item?');
   $('#overlayText').text('This will take effect for all parent items this item is assigned to.');
   $('#overlay').fadeIn('fast',function(){
        $('#overlayBox').animate({'top':'160px'},500);
    });
}

$(document).ready(function(){
   $('a.enable').click(function(){
      doAction('enable');   
   });
   $('a.disable').click(function(){
      doAction('disable');   
   });
   $('a.delete').click(function(){
      doAction('delete');   
   });
});

希望这会有所帮助。干杯

Answer 5

发生这种情况是因为您使用了错误的选择器。

在 属性包含前缀选择器 [name|="value"]（您使用的）该值后面需要跟一个连字符 (-)

描述：选择具有指定属性的元素
值等于给定字符串
或以 后面的字符串开头
由连字符 (-)。

您应该使用 Attribute Starts With Selector [name^="value"] 有效
像这样

描述：选择具有指定属性的元素
值恰好从给定开始
字符串。

您还应该调用 event.preventDefault() 方法，以便链接不会通过。.

演示 http://jsfiddle.net/gaby/BdyPB/