web-dev-qa-db-fra.com

Basculer les images sur le clic en utilisant jQuery

J'ai deux images que je dois basculer en cliquant sur l'image. 

    <img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' 
data-src='images/prof_arrow1.png' />

Lorsque l'utilisateur clique sur l'image, la src doit avoir la valeur data-swap et lorsque vous cliquez à nouveau, la src devrait passer à data-src. Cela devrait continuer à se produire comme une bascule. Toute aide appréciée. 

$("#arrowRotate").click(function() {
    var swapImage = $("#arrowGrey").attr("data-swap");
    $("#arrowGrey").attr({
        'src': swapImage,
        id: 'arrowOrange'
    });
});

C'est là où je suis arrivé jusqu'à présent.

javascriptjquerytogglesrcattr
2
Thomas Sebastian

D'après ce que j'ai compris de votre question, j'espère que c'est celui que vous attendez,

$("#arrowRotate").click(function() { 
      var _this = $(this);
      var current = _this.attr("src");
      var swap = _this.attr("data-swap");     
     _this.attr('src', swap).attr("data-swap",current);   
});

DEMO Fiddle

7
Krish R

Essaye ça:

$("#arrowRotate").click(function(){
if($(this).attr('src')==$(this).attr('data-src'))
  {
    var a = $(this).attr('data-swap');
    $(this).attr('src',a);
  }     
else
  {
    var b = $(this).attr('data-src');
    $(this).attr('src',b);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='arrowRotate' src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg' data-swap='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg' data-src='http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg'>

3
Amy

Cela pourrait aider. Je pense que c'est le moyen le plus simple de permuter des images:

<img id="arrowRotate" src="images/img1.png" data-swap="images/img2.png" data-src="images/img1.png" onclick="swapImage()" />

function swapImage(){
    var swapImage = $('#arrowRotate').attr('data-swap'),
        currentImage = $('#arrowRotate').attr('src');

    $('#arrowRotate').attr({
        'src': swapImage,
        'data-swap': currentImage
    });
};
1
David

Si je vous comprends bien, vous pouvez le faire comme ceci:

HTML

<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png' data-src='images/prof_arrow1.png' data-swapped="false"/>

Javascript 

$("#arrowRotate").click(function() {

    var swapped = $(this).attr("data-swapped");
    var init = 'false';

    if(swapped === 'false'){
        var swapImage = $(this).attr("data-swap");
        init = true;
    }else{
        var swapImage = $(this).attr("data-src");
    }

    $(this).attr({
        'src': swapImage,
        'id': 'arrowOrange',
        'data-swapped': init
    });

});
0
empiric