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

Это происходит потому, что вы используете неправильный селектор.

В Attribute Contains Prefix Selector [name|="value"] (, который вы используете ) значение должно сопровождаться дефисом(-)

Описание : Выбирает элементы, имеющие указанный атрибут со значением, равным данной строке или начинающимся с этой строки , за которым следует дефис (-) .

Вы должны использовать Attribute Starts With Selector [name^="value"], который работает следующим образом

Описание : выборэлементы, которые имеют указанный атрибут со значением , начинающимся точно с данной строки.

Вам также следует вызвать метод event.preventDefault(), чтобы ссылки не проходили ..

демо http://jsfiddle.net/gaby/BdyPB/

Answer 3

Здесь у вас есть еще одно законченное решение:

<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 4

Ваш заголовок может меняться со временем. Я бы сделал это:

$('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 5

Я думаю, что это плохая идея использовать метку в качестве селектора.Вы можете легко добавить класс ко всем связанным элементам и использовать его как селектор.Кроме того, я думаю, что ваш код может быть короче с помощью функции.