jQuery経由で追加した後のクラスのスタイル

Question

クリックしたかどうかに応じてボタンのスタイルを設定しようとしています。より正確に言えば、通常の状態でホバー状態にあるCSSスタイリング（重要ではない）があり、クリックされると特定のクラスが追加されます（私の場合はselected）。

そのクラスが追加されている場合は、別のCSSスタイルを適用する必要があります。さて、ボタンに必要なクラスとCSSスタイルを追加するJavaScript（これはもっとjQueryです）があります。しかし、何も起こっていないようです。

コードのいくつかを貼り付けて、私がそのために使っているものを見ることができますが、実際の作業にリンクを貼り付けます。

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