jquery toggleClass() - 访问所选元素

时间:2012-04-06 18:02:19

标签: jquery

我希望toggle a class基于某些条件,我必须根据已处理元素的ID计算

$(".centre li").toggleClass("highlight", someFunction(x));

(这将选择大约10个列表元素。如果需要突出显示,我需要查找每个元素的ID。)

someFunction(selectedElement) {
  if (selectedElement.id in someArray)
    return true
  else
    return false
}

我可能在关闭地狱中迷失方向,但函数中的this设置为另一个元素。这是真正的代码:

...
showListItem = function(linkSelector, listSelectors, contentSelector) {
return function() {
    $(".centre li").toggleClass("backgroundFullOrange", test(this));
    function test(a) {
        console.log($(a).attr("id")); // -> id of the linkSelector-element
    }
}
};  
$(linkSelector).bind('click', showListItem(linkSelector, listSelectors, contentSelector))
...

更新:事实证明,toggleClass()不是我一直在寻找的功能。请参阅已接受的答案以了解正确用法。

1 个答案:

答案 0 :(得分:4)

首先,$(".centre li").toggleClass("highlight", someFunction(x));不是正确的语法。第二个arg是switch,定义如下,

  

switchA布尔值,用于确定是否应添加该类   或者删除。

切换不能像你一样有效。

在您的情况下,您将需要调用.removeClass('highlight')然后addClass,您可以在其中调用元素的ID并返回突出显示或''。

参见DEMO,每1.5秒随机突出显示2个li。

DEMO

    $(".centre li")
       .removeClass('highlight')
       .addClass(function () {
           return ($.inArray(this.id, someArray) >= 0)?'highlight': '';
       });

我想这次我理解正确了。见下文,

DEMO

$(function() {
    var someArray = ['l1', 'l8'];

    $(".centre li").toggleClass(function() {
        return ($.inArray(this.id, someArray) >= 0)?'highlight':'';
    });

});

尝试使用.filter。如下所示,

$(".centre li").filter(function() {
    return $.inArray(this.id, someArray);
}).toggleClass("highlight");

高亮显示只会添加到过滤器返回的元素中。