Activer / désactiver les images sur cliquez à l'aide de jQuery

J'ai deux images dont j'ai besoin pour activer 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 de la src doit obtenir la valeur de data-swap et lorsque vous cliquez à nouveau sur l' src devrait changer pour data-src. Cela devrait maintenir passe 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à que j'ai eu jusqu'à présent.

pourriez-vous faire jsFiddle.net?

OriginalL'auteur Thomas Sebastian | 2014-12-03

  1. 7

    Basé sur ma compréhension de votre question, l'Espoir, 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);   
});

    DÉMO de Violon

    Oui, c'est ce que je voulais. Cela semble très simple pour moi. Je pourrait le mettre en place. Cependant, je souhaite que vous pourriez avoir expliqué un peu pour me faire comprendre. Mais pas de problème, je vais demander à google. J'apprécie aussi les autres qui ont répondu à ma question.
    Ok Cool, Si vous avez besoin, je peux vous expliquer plus sur.
    J'din comprends pas la dernière ligne de votre code est logique. Peut-être, si vous pouviez m'expliquer qu'.
    Oh je l'ai eu. Vous ajoutez data-swap à src attribut, dans le même temps, l'ajout de src à data-swap. Tellement agréable.
    Oui, Vous avez raison, tiens les valeurs dans des variables et de le remplacer en conséquence!

    OriginalL'auteur Krish R

  2. 1

    Cela peut vous aider. Je pense que c'est la façon la plus simple de l'échange entre les 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
    });
};

    OriginalL'auteur David

  3. 0

    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
    });

});

    OriginalL'auteur empiric