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

逻辑 -

在选定的（this）项目上应用CSS变换比例，并将其从休息（从公共类）中删除。

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

.orderRow{
	width: 60%;
	/*border: 1px solid #000;*/
	height: 180px;
	margin-top: 20px;
	display: block;
	margin: 0 auto;
	padding-bottom: 10px;
}

.singleItem{
	width: 240px;
	height: 180px;
	float: left;
	/*border: 1px solid #000;*/
}

.lMargin{
	margin-left: 2.7%;
}

.anItem{
	width: 200px;
	height: auto;
	display: block;
	margin: 0 auto;
	cursor: pointer;
}

.anItem:hover{
    -webkit-transform: scale(1.25); 
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.anItem{
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
}

.selectedItem{
	width: 220px;
	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

添加课程＆＃39;有效＆＃39;单击元素并从其他元素fiddile

中删除

$(document).ready(function(){

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

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

    });
});

单击JQuery增加图像大小

3 个答案: