Question

I am trying to style a button depending on whatever it was clicked or not. To be more precise, I have a button which in the normal state and hover state has some CSS styling ( not important ), and when it’s clicked, a certain class is added to it ( in my case selected ).

And if that class it’s added another CSS style should be applied to it. Well, I have the JavaScript ( it’s more jQuery ) which adds the class I need to the button, and the CSS style. But it seems like nothing is happening.

I will paste some of the code so you can see what I’m using for that, but I’ll paste the link to the actual working thing.

/*
  The jQuery used for adding the class
  I'm using log() to check if anything happens, but only till I make it work 
*/
var iqns = $(this).find('.iqn');

$(iqns).each(function() {

    var iqn = $(this).parent();

    $(iqn).on('click', function() {
        if($(this).hasClass('.selected')) {
            log('Rmoved / Added Class');
            $(this).removeClass('.selected');
            $(this).addClass('.selected');
        } else {
            log('Added Class');
            $(this).addClass('.selected');
        }
    });

});


<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->

<div id="509247" class="product-wrapper">
    <div class="product">
        <div class="description">
            <div class="thumb">
                <i class="icon">
                    <img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
                    <span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
                        <img src="assets/gfx/zoom-icon.png" alt="Zoom">
                    </span>
                </i>
            </div>
            <div class="info">
                <div class="sales">
                    <div class="icon">
                        <img src="assets/gfx/sales-icon.png" alt="Sales Icon">
                    </div>
                    <div class="text">
                        <p>2</p>
                    </div>
                </div>
                <div class="rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                </div>
            </div>
        </div>

        <div class="purchase">
            <div class="info">
                <i class="icon">
                    <i class="iqn"></i>
                    <span class="tooltip">$ 7</span>
                </i>
            </div>
            <div class="proceed">
                <a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
            </div>
        </div>
    </div>
</div>

/*
  Some of the CSS ( it is actually LESS )
*/

.icon {
    position: relative;
    margin: 0px auto;
    margin-top: 12px;
    margin-left: 12.5px;
    display: block;
    cursor: pointer;
    .dimensions(35px, 35px);
    .background(@noise-monochrome, #323b43, #242a30);
    .border(1px, 1px, 1px, 1px, #242a30);
    .border-radius(25px, 25px, 25px, 25px);
    .shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
    .text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);

    .iqn {
        position: relative;
        margin: 0px auto;
        display: block;
        .dimensions(35px, 35px);
        .background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
    }

    .tooltip {
        position: absolute;
        display: block;
        top: 0px;
        left: 40px;
        pointer-events: none;
        .dimensions(50px, 35px);
        .background(#1f252a);
        .border(1px, 1px, 1px, 1px, #1a1f23);
        .border-radius(5px, 5px, 5px, 5px);
        .font-format(Arial, 16px, normal, bold, normal);
        .text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
        .opacity(0);
        .transition (all, 0.25s, ease-in-out);
    }

    .tooltip:before {
        position: absolute;
        top: 7.5px;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #1f252a;
        content: '';
        z-index: 5;
    }

    .tooltip:after {
        position: absolute;
        top: 6.5px;
        left: -11px;
        width: 0;
        height: 0;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-right: 11px solid #1a1f23;
        content: '';
        z-index: 0;
    }

    &:hover {
        .background(@noise-monochrome, #3c4750, #2c353c);

        .iqn {
            .background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
        }   
    }

    &:hover > .tooltip {
        .opacity(1);
        left: 50px;
        .transition(all, 0.25s, ease-in-out);
    }

    &.selected {
        .background(@noise-monochrome, #2c353c, #3c4750);
        .shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));

        .iqn {
            .background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
        }

        .tooltip {
            .opacity(1);
            left: 50px;
            .transition(all, 0.25s, ease-in-out);
        }
    }
}

But what I pasted won’t be very helpful, probably the link will help more: Anchor ; navigate to the Shop page.

I would appreciate it if someone could help me out with identifying the problem, I’m not so good using the console, perhaps that would help me a lot.

Answer 1

You dont need to set a dot (.) to add a new class, remove and the code should work.

$(this).removeClass('selected');