クリック時の画像サイズの増加JQuery

Question

Jqueryのクリック機能に問題があります。基本的には、私は製品の行を持っているとホバリング（CSSを使用して）、私はイメージを拡大する効果があります。さて、私はJQueryのクリック機能を使って、選択した画像が残りの画像より大きくなり、別の製品を選択すると、以前に拡大された画像が正常に戻ってしまうようにしました。

今、私は数行のコードを書いていますが、それは正しくできません。私は、ホバーとクリック機能の間に何らかの矛盾があると仮定していますが、それを修正する方法を理解することはできません。

https://jsfiddle.net/svjyqva5/

$(document).ready(function(){ 
    //Select Item 
    $(".anItem").click(function(){ 
     // $(".anItem").each(function() { 
     //  $(this).removeClass("selectedItem"); 
     // }); 

     if($(this).hasClass("selectedItem")){ 
      $(this).removeClass("selectedItem"); 
      itemColor = ""; 
     }else{ 
      itemColor = $(this).data("color"); 
      $(this).addClass("selectedItem"); 
    //  $("#oneBtn").show(); 
     }      
    }); 
}); 

はいくつかの助けをお願い申し上げ：

はここJSFiddleリンク（。すべてのコードは、私は以下のjQueryを追加してあります）です。あなたのCSSで

Answer 1

変更これを：

.anItem:not(.selectedItem):hover{ 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    transform: scale(1.25); 
} 

.selectedItem { 
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    transform: scale(1.25); 
} 

そして、あなたのJSでの追加：

$(".anItem").not(this).removeClass("selectedItem"); 

をあなたのクリックハンドラの先頭で。

---

Demo

Answer 2

ロジック -

CSSを選択（this）項目にスケールを変換し、（一般的なクラスから）残りの部分から、それを削除し適用します。

$(document).ready(function(){ 
 
\t //Select Item 
 
\t $(".anItem").click(function(){ \t 
 
    $(".anItem").css('transform','scale(1)') 
 
\t \t $(this).css('transform','scale(1.25)'); 
 
    
 
\t \t 
 
\t \t if($(this).hasClass("selectedItem")){ 
 
\t \t \t $(this).removeClass("selectedItem"); 
 
\t \t \t itemColor = ""; 
 
\t \t }else{ 
 
\t \t \t itemColor = $(this).data("color"); 
 
\t \t \t $(this).addClass("selectedItem"); 
 
\t // \t \t $("#oneBtn").show(); 
 
\t \t } \t \t \t \t \t \t 
 
\t }); 
 
});

.orderRow{ 
 
\t width: 60%; 
 
\t /*border: 1px solid #000;*/ 
 
\t height: 180px; 
 
\t margin-top: 20px; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
\t padding-bottom: 10px; 
 
} 
 

 
.singleItem{ 
 
\t width: 240px; 
 
\t height: 180px; 
 
\t float: left; 
 
\t /*border: 1px solid #000;*/ 
 
} 
 

 
.lMargin{ 
 
\t margin-left: 2.7%; 
 
} 
 

 
.anItem{ 
 
\t width: 200px; 
 
\t height: auto; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
\t cursor: pointer; 
 
} 
 

 
.anItem:hover{ 
 
    -webkit-transform: scale(1.25); 
 
    -moz-transform: scale(1.25); 
 
    -o-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
} 
 

 
.anItem{ 
 
\t -webkit-transition: all .4s ease-in-out; 
 
\t -moz-transition: all .4s ease-in-out; 
 
\t -o-transition: all .4s ease-in-out; 
 
\t -ms-transition: all .4s ease-in-out; 
 
} 
 

 
.selectedItem{ 
 
\t width: 220px; 
 
\t height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="orderRow"> 
 
        <div class="singleItem lMargin"> 
 
         <h4>Blue</h4> 
 
         <img class="anItem" data-color="blue" src="http://bigstartups.co.za/permiclip/website/images/blue.png" /> 
 
        </div> 
 

 
        <div class="singleItem lMargin"> 
 
         <h4>Grey</h4> 
 
         <img class="anItem" data-color="grey" src="http://bigstartups.co.za/permiclip/website/images/grey.png" /> 
 
        </div> 
 

 
        <div class="singleItem lMargin"> 
 
         <h4>Red</h4> 
 
         <img class="anItem" data-color="red" src="http://bigstartups.co.za/permiclip/website/images/red.png" /> 
 
        </div>       
 
       </div>

Answer 3

クリックした要素に 'アクティブ' と他の要素から削除するクラスを追加fiddile

$(document).ready(function(){ 

    $(".anItem").click(function(){ 

    $(".active").removeClass("active"); 
    $(this).addClass("active"); 

    }); 
});