it-swarm.com.de

Mit jQuery zwischen Bildern umschalten

Ich habe zwei Bilder, die ich beim Klicken auf das Bild umschalten muss. 

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

Wenn der Benutzer auf das Bild klickt, sollte die src den Wert von data-swap erhalten und wenn Sie erneut klicken, sollte die src in data-src geändert werden. Dies sollte genauso wie ein Toggle passieren. Jede Hilfe geschätzt. 

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

Hier bin ich soweit.

2

Nach meinem Verständnis aus Ihrer Frage, hoffe das ist das, was Sie erwarten,

$("#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

Versuche dies:

$("#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

Das könnte helfen. Ich denke, das ist die einfachste Möglichkeit, Bilder auszutauschen:

<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

Wenn ich dich richtig verstehe, kannst du es so machen:

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