javascript - 通过 jQuery 添加后样式化类

Question

我正在尝试根据点击与否来设置按钮的样式。更准确地说，我有一个按钮，在正常状态和悬停状态下有一些 CSS 样式(不重要)，当它被点击时，一个特定的类被添加到它(在我的例子中 selected ).

如果添加了该类，则应对其应用另一种 CSS 样式。好吧，我有 JavaScript(更像是 jQuery)，它将我需要的类添加到按钮和 CSS 样式。但似乎什么都没有发生。

我会粘贴一些代码，这样您就可以看到我为此使用了什么，但我会粘贴指向实际工作内容的链接。

/*
  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);
        }
    }
}

但我粘贴的内容不会很有帮助，链接可能会有更多帮助:Anchor ;导航到商店页面。

如果有人能帮助我找出问题，我将不胜感激，我不太擅长使用控制台，也许这会对我有很大帮助。

Answer 1

您不需要设置点 (.) 来添加新类，删除并且代码应该可以工作。

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