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/