Класс по индексу или данных-ATTR

Question

У меня есть этот код:

var i = 1; 
if ($(this).attr('data-target="1"')){} 

Теперь я хочу передать переменную я вместо 1.

if ($(this).attr('data-target="'+i+'"')){} 

я прав?

фактически что я хочу. Я хочу нажать li при щелчке h2data-target in for loop. Есть ли какое-либо другое решение для целевых нескольких элементов по одному коду?

найти fiddle

Answer 1

У вас нет элемента с классом ul,

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

$('.UDSHead').click(function(){ 
    var dataTarget = $(this).data('target'); 
    $('li:eq('+ (dataTarget - 1) +')').addClass('highLight'); 
}); 

Кроме того, вам не нужно связывать события в цикл ,

Example

Answer 2

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

// if you're using dynamic content for h2, then use .on instead for event delegation issues 
$(document).on('click', '.UDSHead', function() { 
    // remove class from li element 
    $('li').removeClass('highLight'); 
    // get current element data-target value 
    var target = $(this).data('target'); 
    // minus 1 as eq is zero based 
    $('ul li:eq(' + (target-1) + ')').addClass('highLight');  

}); 

DEMO

Answer 3

Вы можете иметь одно событие щелчка для всех элементов h2, а затем целевой соответствующие Лис на основе индекса щелкнул h2:

var udsheads = $('.UDSHead'); 
var lis = $('li'); 
udsheads.click(function(){ 
    lis.removeClass('highLight').eq(udsheads.index(this)).addClass('highLight') 
}); 

Working Demo

Answer 4

Согласно документации http://api.jquery.com/attr/, если вы хотите сравнить значение атрибута, вы должны сделать это таким образом:

if($(this).attr(attributeName) == value) 

Применив к коду:

if($(this).attr('data-target') == i) { 
    // more code 
} 

Использование функция данных:

if($(this).data('target') == i) { 
    // more code 
}