Question

Look at these html and jQuery codes:

<button>div</button>
<button>span</button>
<div class="fill">fill</div>
<span class="fill">fill</span>
<div class="fill">fill</div>
<span class="fill">fill</span>
<div class="fill">fill</div>
<span class="fill">fill</span>

(function() {
    $('button').click(function() {
        var buttonVal = $(this).text();

        $.expr[':'].fillClass = function(element) 
            { return $(element).attr('class') === buttonVal);};

        $('div:fillClass').css('opacity', '.2');
    });
})(jQuery);

when I click the button, it saves the value of button in buttonVal, but when I put the buttonVal in the return $(element).attr('class') === buttonVal does not work. I have changed the order of functions, but I do not know why it does not work.

Answer 1

First of all, I’m going to assume that you are trying to return a boolean value of whether the class of the element is equal to buttonVal. In that case, you need to surround the entire statement in parenthesis like this:

return ($(element).attr('class') === buttonVal);

However, there’s another issue. In your code, you have var buttonVal = $(this).text();. Therefore, buttonVal will have the value div or span depending on which button you clicked. None of the elements that you’ve given have the class div or span so therefore it won’t be true for anything.