增加點擊圖像的大小JQuery

Question

我在Jquery中的點擊函數有問題。基本上，我有一排產品和懸停（使用CSS），我有一個放大圖像的效果。現在，我在JQuery中做了一個點擊功能，在選擇產品時，所選圖像比其他產品要大，當我選擇另一種產品時，以前放大的圖像會恢復正常。

現在我已經寫了幾行代碼，但無法正確理解。我假設懸停和點擊功能之間存在某種衝突，但我無法弄清楚如何解決它。

這裏有一個鏈接的jsfiddle（所有的代碼都是有我加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(); 
     }      
    }); 
}); 

希望得到一些幫助。

Answer 1

變化這在你的CSS：

.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"); 

    }); 
});