简化每个id的多个函数

Simplify multiple function for each IDs

本文关键字：函数 id      更新时间：2023-09-26

我创建了一个简单的代码，使用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');
  });
});

小提琴

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

注意

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

是的，您可以使用.each()函数来实现此功能，例如:

$(document).ready(function () {
     $(".cardcont img").each(function(){              
            $(this).click(function(){
                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                  $(this).css({"transform": "translate3d(0px, 0px, 0px)"});
                }else{
                  $(".cardcont img").css({"transform": "translate3d(0px, 0px, 0px)"});
                  $(this).css({"transform": "translate3d(-100px, 0px, 0px)"});
                  $(this).addClass('active');                
                }
            });            
     });
});

这里小提琴

这样，你就不必修改你的HTML结构了。

文档: http://api.jquery.com/jquery.each/

相关文章：