增加点击图像的大小JQuery

我在Jquery中的点击函数有问题。基本上，我有一排产品和悬停（使用CSS），我有一个放大图像的效果。现在，我在JQuery中做了一个点击功能，在选择产品时，所选图像比其他产品要大，当我选择另一种产品时，以前放大的图像会恢复正常。增加点击图像的大小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(); 
     }      
    }); 
});

希望得到一些帮助。

来源

2016-04-04 nTuply

更改'宽度：220px;'到'变换：比例（1.25） ;''在你的'selectedItem'类上 – Bart

变化这在你的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

来源

2016-04-04 13:35:46 empiric

不知道这是否会工作100％，因为图像在已经拥有'selectedItem'类后点击后应该恢复。如果你在点击处理程序的开始处删除'selectedItem'类，它将会重新添加它 – Bart

@Bart它似乎在正常工作 – nTuply

@nTuply那么它的一切都很好，就好像你想要删除该类当第二次点击:) – Bart

逻辑 -

应用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>

来源

2016-04-04 13:37:59

添加一类 '活跃' 到点击的元素和从其他元件除去fiddile

$(document).ready(function(){ 

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

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

    }); 
});

来源

2016-04-04 13:51:25 shahul

增加点击图像的大小JQuery

回答

相关问题