Выбор атрибута jquery всегда возвращает false?

Question

Я возился со встроенными атрибутами и использовал их для запуска событий с помощью jQuery, но я столкнулся с проблемой.

Я пытаюсь вызвать консольный журнал (в хроме), когда элемент имеет атрибут self-toggle="dropdown". Но с моим недостатком знаний я не могу заставить его работать.

Мой HTML (якорный тег для проверки):

<a href="#" self-toggle="dropdown">dropdown</a> 
<a href="#">not dropdown</a> 

Мой JQuery:

$(document).ready(function() { 
    $(this).on('click', function() { 
     if($(this).attr('[self-toggle]') == "dropdown") { 
      console.log('self-toggle: true'); 
     } else { 
      console.log('self-toggle: false'); 
     }; 
    }); 
}); 

Почему это не работает, jsFiddle?

Answer 1

См http://jsfiddle.net/ykkya5Lj/1/

Вам не нужно [и] по имени атрибута, а также вы не зацепив до щелчка a элементов. При привязке к a клик, $ (это) будет ссылкой, на которую вы нажали.

$('a').on('click', function() { 
     if($(this).attr('self-toggle') == "dropdown") { 
      console.log('self-toggle: true'); 
     } else { 
      console.log('self-toggle: false'); 
     }; 
    }); 

Answer 2

Вам нужно просто передать имя атрибута attr()

$(document).ready(function() { 
 
    $('a').on('click', function() { 
 
    if ($(this).attr('self-toggle') == "dropdown") { 
 
     log('self-toggle: true'); 
 
    } else { 
 
     log('self-toggle: false'); 
 
    }; 
 
    }); 
 
}); 
 

 
var $log = $('#log'); 
 

 
function log(message) { 
 
    $('<p/>', { 
 
    html: message 
 
    }).prependTo($log) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#" self-toggle="dropdown">dropdown</a> 
 
<a href="#">not dropdown</a> 
 

 
<div id="log"></div>