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/

带有前缀选择器问题的JQuery

5 个答案: