简化每个ID的多个功能

我创建了一个简单的代码，用于使用JQuery和CSS滑动切换图像。当您点击另一个图像时，我使用了多种功能来隐藏/切换其他功能。有没有一种方法来最大限度地减少这种使用？另外，当我第三次点击不同的图像时，我必须在它向后滑动之前双击。我的代码..及其JSFiddle 简化每个ID的多个功能

<!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>

来源

2016-11-12 PapaBless

您是否尝试过使用'class'名称而不是'ID'？ – NewToJS

示例https://jsfiddle.net/166sb7ys/4/使用类名称将允许您使用一个函数来运行它 – NewToJS

下面是使用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文森特认为是一种可能性。

来源

2016-11-12 14:00:05

是的，你可以使用.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');     
       } 
      });    
    }); 
});

Fiddle here

这样，您就不必碰在你的HTML结构上。

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

来源

2016-11-12 13:43:03

简化每个ID的多个功能

回答

相关问题