Javascript 通过jQuery添加后设置类的样式

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

被选中

）

如果该类添加了另一个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);
        }
    }
}

/*
用于添加类的jQuery
我正在使用log（）检查是否发生了任何事情，但只有在我让它工作之前
*/
var iqns=$（this.find（'.iqn'）；
$（IQN）。每个（函数（）{
var iqn=$（this.parent（）；
$（iqn）.on（'click'，function（）{
if（$（this）.hasClass（'.selected'））{
日志（'Rmoved/Added Class'）；
$（this.removeClass（'.selected'）；
$（this.addClass（'.selected'）；
}否则{
日志（“添加的类”）；
$（this.addClass（'.selected'）；
}
});
});
二,

$ 7
/*
一些CSS（实际上更少）
*/
.图标{
位置：相对位置；
保证金：0px自动；
边缘顶部：12px；
左边距：12.5px；
显示：块；
光标：指针；
.尺寸（35px，35px）；
.背景（@噪声单色，#323b43，#242a30）；
.边框（1px，1px，1px，1px，#242a30）；
.边界半径（25px，25px，25px，25px）；
阴影正常插入（0px 1px 2px rgba（0000000000.5），1px 1px 1px rgba（255，255，255，0.1）插入）；
.文本格式（居中、无、无、继承、无、正常、正常、正常、#ffffff）；
.iqn{
位置：相对位置；
保证金：0px自动；
显示：块；
.尺寸（35px，35px）；
.background（url（../gfx/price icon.png），0px 0px，不重复）；
}
.工具提示{
位置：绝对位置；
显示：块；
顶部：0px；
左：40px；
指针事件：无；
.尺寸（50px，35px）；
.背景（#1f252a）；
.边框（1px，1px，1px，1px，#1a1f23）；
.边界半径（5px，5px，5px，5px）；
.字体格式（Arial、16px、普通、粗体、普通）；
.文本格式（居中、无、无、继承、无、正常、35px、正常、#03b0f0）；
.不透明度（0）；
.过渡（全部，0.25秒，缓进缓出）；
}
.工具提示：在{
位置：绝对位置；
顶部：7.5px；
左：-10px；
宽度：0；
身高：0；
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px实心#1f252a；
内容：''；
z指数：5；
}
。工具提示：在{
位置：绝对位置；
顶部：6.5px；
左：-11px；
宽度：0；
身高：0；
边框顶部：11px实心透明；
边框底部：11px实心透明；
右边框：11px实心#1a1f23；
内容：''；
z指数：0；
}
&：悬停{
.背景（@噪声单色，#3c4750，#2c353c）；
.iqn{
.background（url（../gfx/price icon.png），0px-35px，不重复）；
}   
}
&：hover>。工具提示{
.不透明度（1）；
左：50px；
.过渡（全部，0.25秒，缓进缓出）；
}
&.选定{
.背景（@噪声单色，#2c353c，#3c4750）；
阴影正常插入（0px 1px 2px rgba（0000000000.5）插入，1px 1px 1px rgba（255，255，255，0.1））；
.iqn{
.background（url（../gfx/price icon.png），0px-35px，不重复）；
}
.工具提示{
.不透明度（1）；
左：50px；
.过渡（全部，0.25秒，缓进缓出）；
}
}
}

但是我粘贴的内容不会很有帮助，可能链接会帮助更多：；导航到商店页面

---

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

您不需要设置点（

）来添加新类、删除，代码应该可以工作

---

$（this.removeClass（'selected'）

您不需要将

放在类前面，请尝试$（element）.addClass（'yourClass'）；哦，我的错误，这样一个无辜的人，一切都出了问题。