Блог

Не могли бы вы подсказать мне, как обрабатывать несколько тегов привязки для функциональности click?

Мой код похож :

 <a id="test1" href="#" >test1</a>
<a id="test2" href="#" >test2</a>
  

Моя функциональность jQuery :

 $('a').click(function(event) {
    alert('click');
});
  

Функциональность jQuery click работает для всех тегов привязки, но я хочу дифференцировать функциональность jQuery на основе атрибута id ..

Посмотрите на идентификатор этого и сделайте оператор if или переключатель (рекомендуется переключатель):

 $('a').click(function(event) {
    switch(this.id) {
        case 'test1':
            alert('link with an id of test1!');
            event.preventDefault();
            break;
        case 'test2':
            alert('link with an id of test2!');
            event.preventDefault();
            break;
        default:
            //Default behavior
    }
});
  

Вы хотите сделать что-то другое в зависимости от идентификатора?

Вы могли бы сделать что-то вроде

 $('a').click(function(e){
    var id = $(this).attr('id');
    // switch depending on id
});
  

или

 $('#test1').click(function(e){ alert("you clicked test1"); });
$('#test2').click(function(e){ alert("you clicked test2"); });
  

Но это было бы не очень хорошо, если бы вы затем собирались добавить несколько, чтобы сделать то же самое.

Вы можете получить атрибут id.

 $('a').click(function(event) {
    alert($(this).attr('id') ' clicked!');
});
  

вы можете прочитать идентификатор элемента и в зависимости от идентификатора создавать свои функции

 $('a').click(function(event) {
    if ($(this).attr("id") == 'test1')
    {
        alert('Test 1 was clicked');
    }
    else if ($(this).attr("id") == 'test2')
    {
        alert('Test 2 was clicked');
    }
});
  

Если вы хотите привязаться к элементу на основе идентификатора:

 $('#test1').click(function(event) {
   alert('test1 clicked');
});
  

Это мой подход

 $('a').click(
    function()
    {
        switch($(this).attr('id'))
        {
            case 'test1':
                // Do some work
                break;
            case 'test2':
                // Do some work
                break;
        }
    }
);
  

Вы можете посмотреть идентификатор, как предложено в других ответах, но вы также можете прикрепить атрибуты данных к каждому тегу с помощью пользовательского атрибута данных (html5) или использовать href, к которому позже можно получить доступ из события onclick (html5).

пример:

 <a id="test1" data-my-custom-data="Insert" data-row-id="24" href="#" >test1</a>
<a id="test2" href="Insert" >test2</a>

$("a").click(function(event)
{
    alert($(this).attr("data-my-custom-data"));
    alert($(this).attr("data-row-id"));
    alert($(this).attr("href"));

    event.preventDefault(); // To avoid browsing to href...
});