Получите атрибуты jQuery для каждого, а не только для первого

Question

Мне нужно получить datahours и т. Д. Для конкретной ссылки в длинном списке. Чего мне не хватает?

HTML:

<ul>
<li><a href="#" class="item" title="Gallery" datakey="1" datatitle="A+D Gallery" dataaddress="123 Main St" datahours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
<li><a href="#" class="item" title="Radio" datakey="2" datatitle="Radio" dataaddy="321 Center Dr" datahours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li></ul>

JS:

    $(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(this).click(function(){

        // CONSOLE
        console.log(datakey);

    });

}) // DOM Ready

Answer 1

Как насчет того, чтобы сделать это способом jQuery.

HTML

<ul id="items">
    <li><a href="#" class="item" title="Gallery" data-key="1" data-title="A+D Gallery" data-address="123 Main St" data-hours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
    <li><a href="#" class="item" title="Radio" data-key="2" data-title="Radio" data-address="321 Center Dr" data-hours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li>
</ul>

JavaScript

$(function()
{
    $('#items').on('click', 'a.item', function ()
    {
        console.log($(this).data('key'));
        return false;
    });
});

Демо http://jsfiddle.net/mattball/XBrfH/

Answer 2

При запросе атрибута из селектора, который будет соответствовать нескольким элементам, вы должны сделать это с помощью функции each

$('.item').each(function () { 
  console.log($(this).attr('datakey'));
});

Answer 3

Если вы можете изменить HTML, я настоятельно рекомендую вместо этого использовать атрибуты данных.

HTML:

<a href="#" class="item" title="Gallery" data-key="1" data-title="A+D Gallery"  data-address="123 Main St" data-hours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a>

JS:

console.log($("a").data("key"), $("a").data("title"), $("a").data("address"), $("a").data("hours"));

http://jsfiddle.net/LDaMn/

Answer 4

Попробуйте это

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var datakey = $(".item").attr("datakey");   
    var datatitle = $(".item").attr("datatitle");
    var dataaddress = $(".item").attr("dataaddress");
    var datahours = $(".item").attr("datahours");

    $(".item").click(function(){

        // CONSOLE
        console.log(datakey);

    });
})
</script>

<li><a href="#" class="item" title="Gallery" datakey="1" datatitle="A+D Gallery" dataaddress="123 Main St" datahours="10:00, 10:30, 11:00, 11:30, 1:00">Gallery</a></li>
<li><a href="#" class="item" title="Radio" datakey="2" datatitle="Radio" dataaddy="321 Center Dr" datahours="11:00, 11:30, 12:00, 12:30, 1:00, 1:30, 2:00, 2:30">Radio</a></li></ul>

Answer 5

Пара вещей.

1. Вы должны прикрепить событие click непосредственно к тегу a.Ваша строка $(this).click() вероятно прикреплена ко всему документу.$('a.item').click() Таким образом this будет ссылаться на ссылку, по которой щелкнули.

2. Вы должны указать свой атрибут данных как data-title и data-key.Таким образом, вы можете использовать $.data() jQuery, чтобы вы могли $(this).data().key

Answer 6

В данный момент вы получаете данные (и т. Д.) Для всех предметов с классом .item.Вы можете получить эти элементы в событии click.

$(".item").click(function(){

    var datakey = $(this).attr("datakey");   
    var datatitle = $(this).attr("datatitle");
    var dataaddress = $(this).attr("dataaddress");
    var datahours = $(this).attr("datahours");

    // CONSOLE
    console.log(datakey);

    });

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

Answer 7

Тогда вам нужно что-то подобное

$('.item').click(function() {
    var datahours = $(this).attr("datahours");
});

$(this) относится к элементу, по которому щелкнули, который будет иметь элемент класса

Answer 8

Вы добавляете прослушиватель кликов к document, а не к самому элементу a.Если вы добавите обработчик кликов к каждому тегу a, вы получите то, что вам нужно.

$(function() {
    $('a.item').click(function() {
         // this is the a tag you clicked.
         console.log($(this).attr("datakey"));
    });
});