JQuery'deki görüntü boyutunu büyütme JQuery

Question

Jquery'deki tıklama işlevimde bir sorun yaşıyorum. Temel olarak, bir ürün dizim var ve üzerine gelindiğinde (CSS kullanarak), Ben görüntüyü genişleten bir etkisi var. Şimdi, JQuery'de bir ürün seçerken, seçilen görüntünün geri kalanı daha büyük olduğundan ve başka bir ürün seçtiğimde, önceden büyütülmüş görüntünün normale döndüğü bir tıklama işlevi yaptım.

Şimdi birkaç satır kod yazdım ama doğru anlayamıyorum. Vurgusuyla tıklama işlevi arasında bir çeşit çelişki olduğunu varsayardım, ancak bunu nasıl düzelteceğimi anlayamıyorum.

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(); 
     }      
    }); 
}); 

biraz yardım takdir ederim:

İşte JSFiddle bağlantı (. Bütün kodlar aşağıda JQuery eklendi vardır) var. CSS'nizde

Answer 1

Değişim bu:

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

Ve JS

ekleyin:

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

tıklama işleyici başında.

---

Demo

Answer 2

Mantık -

CSS seçilen (this) öğe üzerinde Ölçeği Transform ve (yaygın sınıfından) geri kalanından çıkarmak uygulayın.

$(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

tıklandığında elemana 'aktif' ve diğer eleman kaldırılır Sınıf ekleme fiddile

$(document).ready(function(){ 

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

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

    }); 
});