CODEWITHSUNDEEP
jquerycsshtml
kevingilbert100
kevingilbert100

Reputation: 1333

If has class then remove class and add class

Having an issue here. This should be working... I have 4 elements in html that look like this

    <!-- Light Color Scheme - Header False and Show Faces True -->
        <div class="fb-like-box h-f_dsf-t visible" data-href="http://www.facebook.com/pages/Alpine-Adaptive-Scholarship-Program/344942928870040?fref=ts" data-width="292" data-show-faces="true" data-stream="true" data-header="false" colorscheme="light"></div>

Although they are in different variations. So one could be header true and show faces true and the unique class would be ".h-t_dsf-t". The javascript should pick between them and tell which one is active and which one isn't. So only one has the .visible class at a time and the others have a .invisible class.

Thanks in advance!

My Javascript For The Show Faces Button (note .sf-no.click doesn't have anything in it yet but it will in the future I was just trying to get it to work for the yes button first.)

// Show Faces
$(document).ready(function() {
    $('.sf-yes').click(
        function() {
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-not-active');
            // Show Faces Yes &&& Show Header No
            if ($('.sf-yes.sh-no').hasClass('.btn-active')) {
                $('.h-f_dsf-t').removeClass('.invisible').addClass('.visible');
                $('.visible').removeClass('.visible').addClass('.invisible');
            }
            // Show Faces Yes &&& Show Header Yes
            if ($('.sf-yes.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-t').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header Yes
            if ($('.sf-no.sh-yes').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-t_dsf-f').removeClass('.invisible').addClass('.visible');
            }
            // Show Faces No &&& Show Header No
            if ($('.sf-no.sh-no').hasClass('.btn-active')) {
                $('.visible').removeClass('.visible').addClass('.invisible');
                $('.h-f_dsf-f').removeClass('.invisible').addClass('.visible');
            }
        }
    );
    $('.sf-no').click(
        function() {
            $('.sf-no').removeClass('btn-not-active btn-active').addClass('btn-active');
            $('.sf-yes').removeClass('btn-not-active btn-active').addClass('btn-not-active');
        }
    );
});

Upvotes: 0

Views: 7297

Answers (2)

DF_
DF_

Reputation: 3973

You have a few problems with your included code. When you remove a class or add a class, you shouldn't include the fullstop. . You have done this on .hasClass, removeClass, and addClass.

Additionally your conditional statements seem to be contradictory. Perhaps you actually mean what you say, but I am assuming that the elements that include the classes .sf-yes and .sh-no are two different elements. Your jQuery statement is looking for an element with both those classes.

It is also worth nothing that selectors using a class is not the best practice and you should use unique id's such as #sf-yes. Alternatively if you must use multiple class selectors, then assign each to a variable at the start of your function call.

Finally, I don't think you should tag this as a Facebook question as your code is regarding jQuery specifically.

Upvotes: 2

Luca Rainone
Luca Rainone

Reputation: 16468

.hasClass('.btn-active')

should be

.hasClass('btn-active')

without dot .

Upvotes: 4

Related Questions