gpt4 book ai didi

javascript - 简化每个 ID 的多项功能

转载 作者:行者123 更新时间:2023-11-27 23:22:08 24 4
gpt4 key购买 nike

我创建了一个简单的代码,使用 JQuery 和 CSS 滑入和滑出切换图像。当您单击另一个图像时,我使用了多个函数来隐藏/切换其他函数。有没有办法尽量减少这个的使用?。另外,当我第三次单击不同的图像时,我必须在它滑回之前双击。我的代码……及其 JSFiddle

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#img1").toggle(
function () {
$("#img1").css({"transform": "translate3d(-100px, 0px, 0px)"});
$("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
$("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
},
function () {
$("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
}
);
$("#img2").toggle(
function () {
$("#img2").css({"transform": "translate3d(-100px, 0px, 0px)"});
$("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
$("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
},
function () {
$("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
}
);
$("#img3").toggle(
function () {
$("#img3").css({"transform": "translate3d(-100px, 0px, 0px)"});
$("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
$("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
},
function () {
$("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
}
);
});
</script>
</head>
<title></title>
<style>
.cardcont img {
transition: transform .2s ease-in-out;
}
.cardcont #img1 {
position:absolute;
left:0;
top:0;
z-index:-1;
}
.cardcont #img2 {
position:absolute;
left:200px;
top:0;
z-index:-1;
}
.cardcont #img3 {
position:absolute;
left:400px;
top:0;
z-index:-1;
}
</style>
</head>
<body>
<div class="cardcont">
<img src="http://i65.tinypic.com/fokk9j.jpg" id="img1"/>
<img src="http://i65.tinypic.com/fokk9j.jpg" id="img2"/>
<img src="http://i65.tinypic.com/fokk9j.jpg" id="img3"/>
</div>

</body>
</html>

最佳答案

这是一个使用 this.not..

css(已添加)

.cardcont img {
transform: translate3d(0px, 0px, 0px);
transition: transform .2s ease-in-out;
}

.active-image {
transform: translate3d(-100px, 0px, 0px)!important;
}

jquery

$(function() {
$('img').click(function() {
$('img').not(this).removeClass('active-image');
$(this).toggleClass('active-image');
});
});

fiddle

https://jsfiddle.net/Hastig/98dxLy5c/

注意

您可能希望更具体地定位图像,使用 .cardcont img 作为 Vincent 建议的一种可能性。

关于javascript - 简化每个 ID 的多项功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40563283/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com