Question

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

Answer 1

使用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建议这是一种可能性。

Answer 2

是的，您可以使用connRserve.eval(toRserveForProcessing).toDebugString();功能实现此目的，而不是：

asList()

Fiddle here

这样，您就不必触及HTML结构了。

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

简化每个ID

2 个答案: