IDごとに複数の機能を簡略化

JQueryとCSSを使用して、切り替えられた画像をスライドインまたはスイングする簡単なコードを作成しました。別の画像をクリックすると、複数の機能を使用して他の画像を非表示/非表示に切り替えました。これの使用を最小限に抑える方法はありますか？さらに、3回目に別のイメージをクリックすると、スライドバックする前にダブルクリックする必要があります。私のコード..とその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

'ID'ではなく' class'名を使ってみましたか？ – NewToJS

例https://jsfiddle.net/166sb7ys/4/クラス名を使用すると、1つの関数を使用してすべてを実行できます – 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/

ノート

あなたはおそらく、より具体的にヴィンセントは、1つの可能性である提案されているよう.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ごとに複数の機能を簡略化

答えて

関連する問題