Javascript 按索引或数据属性分类

我有以下代码：

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

现在我想传递I变量，而不是1

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

我说得对吗

其实我想做的是什么。我想在for循环中单击

h2

数据目标时单击
li
。有没有其他解决方案可以通过一个代码针对多个元素

查找
尝试以下操作：

// 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');    

});

试试这个：

// 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');    

});

您可以为所有h2元素创建一个单击事件，然后根据单击的h2的索引将相应的lis作为目标：

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

您可以为所有h2元素创建一个单击事件，然后根据单击的h2的索引将相应的lis作为目标：

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

您没有类为
ul
的元素

试试这个

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

此外，您不需要在for循环中绑定事件

您没有类为
ul的元素

试试这个

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

此外，您不需要在for循环中绑定事件

根据文档，如果要比较属性值，必须采用以下方式：

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

应用于您的代码：

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

使用数据功能：

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

根据文档，如果要比较属性值，必须按以下方式进行：

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

应用于您的代码：

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

使用数据功能：

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

使用
data（“target”）
代替
attr（…）
使用
data（“target”）
代替
attr（…）
嘿，谢谢。我喜欢不使用数据目标的替代解决方案。@locateganesh：我建议这样做是因为我没有找到1-4之间的数据目标值。其他人提供的解决方案在点击第四个h2元素时失败。这将在所有情况下都有效，尽管它的索引基于：）第4个。。这不是错误。我编写了data target=“1”而不是data target=“4”。其他人也是对的。但是你的索引很好…嘿，谢谢。我喜欢不使用数据目标的替代解决方案。@locateganesh：我建议这样做是因为我没有找到1-4之间的数据目标值。其他人提供的解决方案在点击第四个h2元素时失败。这将在所有情况下都有效，尽管它的索引基于：）第4个。。这不是错误。我编写了data target=“1”而不是data target=“4”。其他人也是对的。但是你的索引在尼斯。。