Селектор данных jquery

Question

Я пытаюсь использовать селектор данных jquery для добавления / удаления класса для элемента.

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button

    if ($('#side_categories .testbox').hasClass('activated')) {
        //otherInput is the hidden text input
        $('#listings .deals:data("category"="+category+")').removeClass('activated');
    } else {
        $('#listings .deals:data("category"="+category+")').addClass('activated');
    }
});

В моем тестовом окне для каждого триггера установлена ​​категория данных, чтобы передать его.Категория, входящая в категорию данных, заполняется через php.

Не могу заставить это работать, я вижу ошибки вроде:

regular expression too complex
[Break On This Error] while (m = matcher.exec(expr)) { 

или когда я используюболее старая функция написана Джеймсом Падолси, я получаю следующее:

uncaught exception: Syntax error, unrecognized expression: data

Я просто хочу иметь возможность добавлять / удалять классы из LI на основе выбора флажков.

Заранее большое спасибо!

Answer 1

Сделайте так, чтобы вы могли фильтровать по значению data:

$('#listings .deals').filter(function(index) {
    return $(this).data('category') == category;
}).removeClass('activated');

---

.filter() в документе JQuery

---

РАБОЧИЙ КОД :

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button
    var these_deals = $('#listings .deals').filter(function (index) {
            return $(this).data('category') == category;
        });
    $('#listings .deals').removeClass('activated');
    if (these_deals.hasClass('activated')) {
        //otherInput is the hidden text input
        these_deals.removeClass('activated');
    } else {
        these_deals.addClass('activated');
    }
});

Скрипка: http://jsfiddle.net/maniator/CcfwX/

Answer 2

jQuery не имеет встроенного селектора :data(). Вам нужно будет явно определить его в $.expr[':'].data или использовать плагин, который добавляет его в качестве селектора.

Answer 3

Хотелось бы что-нибудь подобное вместо этого?

$("#side_categories .testbox").click(function () {
    var category = $(this).data('category'); //get the category from the clicked button
    $('#listings .deals[data-category*="' + category + '"]').toggleClass('activated');
}); 

Answer 4

Попробуйте использовать одинарные вместо двойных кавычек вокруг категории, например:

...
$('#listings .deals:data("category"='+category+')').removeClass('activated');
} else {
$('#listings .deals:data("category"='+category+')').addClass('activated');
...

Если это не сработает, попробуйте различные комбинации добавления и удаления двойных кавычек, например, например:

...
$('#listings .deals:data(category="'+category+'")').removeClass('activated');
} else {
$('#listings .deals:data(category="'+category+'")').addClass('activated');
...

Я не эксперт в селекторах jQuery, но вы, похоже, пытаетесь использовать категорию переменных, а не строку "+ category +" в вашем селекторе, чего не делает ваш текущий код, поскольку селектор окружен одинарными, а не двойными кавычками.