1

I'm trying to use a jquery data selector to add/remove a class to an element.

$("#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');
    }
});

In my test box I have data-category set on each trigger to pass it over. The category going into data-category is filled in via php.

Can't seem to get this to work, have been seeing errors like: 

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

or when I'm using the older function written by james padolsey, i get the following:

uncaught exception: Syntax error, unrecognized expression: data

I just want to be able to add/remove classes from LI's based on checkbox selections.

Many thanks in advance!

Improve this question
0

4 Answers 4

Reset to default
6

Make it so you can filter by the data value:

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

.filter() in jQuery doc

WORKING CODE:

$("#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');
    }
});

Fiddle: http://jsfiddle.net/maniator/CcfwX/

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

huge thanks for this! 95% sure its my own error, but i couldn't get this to work
@Mike -- what are the errors that you have on the page? Can you put you code into a jsfiddle.net demo?
I wasn't getting any error, just nothing was happening. and firebug didn't report anythign at all
@Mike can I see your sample code? (with html, maybe it isnt selecting properly)
yes! thank you! seems i dont have enough reputation here to vote on things. but again, huge thanks to everyone!
|
2

jQuery doesn't have a native :data() selector. You will need to explicitly define it on $.expr[':'].data, or use a plugin that adds it as a selector.

Improve this answer

1 Comment

you can select it with .filter(), see my answer.
0

Would something like this work instead?

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

7 Comments

far as i understood, "data-category" was part of the .data api which should read the -category
yes, but as @zzzzBov said, because there's no :data() selector, the above solution would be an alternate :) something similar was suggested in: stackoverflow.com/questions/4191386/…
YESSS!!! thank you! huge thanks to everyone for their input! so far this has been a few hours of unnecessary headaches! :)
I was following james.padolsey.com/javascript/a-better-data-selector-for-jquery as well as the updated functions/plugins but the above code did the trick! :)
btw, it's customary to mark the proposed solution that resolved your issue as the answer to your original question :)
|
-2

Try using single instead of double quotes around category, like this:

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

If that doesn't work, try various combinations of adding and removing double quotes, like this, for instance:

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

I'm not an expert at jQuery selectors, but you seem to be trying to use the variable category, rather than the string "+category+", in your selector, which your current code isn't doing, since the selector is surrounded by single quotes rather than double quotes.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.