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

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

在Attribute Contains Prefix Selector [name|="value"]（您使用）的值需要被后跟一个连字符（ - ）

描述：选择具有与 值的指定属性的元素或者等于一个给定的字符串 或以该字符串开头，后跟 ，连字符（ - ）。

您应该使用的作品 这样

说明的Attribute Starts With Selector [name^="value"]：选择具有与 值与给定 字符串完全开始的指定属性的元素。

你也应该调用event.preventDefault()方法，这样的链接不通过..

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