2016-09-24 14 views
-1

Ich versuche, ein Bild auf einen Klick mit Javascript wenn sonst Methode zu tauschen. Der erste Bildaustausch funktioniert (wenn), aber die anderen 2 nicht (sonst wenn). Hier ist meine JS/JQuery:Bild tauschen auf Bild klicken Sie auf Javascript wenn sonst

$("#right").on("click" , 

function() { 

    var pic = $("#selection img").attr("id"); 

    if (pic == "instagram") { 
     $("#instagram").removeClass("show").addClass("hide"); 
     $("#snapchat").removeClass("hide").addClass("show"); 
     $("span").text("Snapchat"); 

    } 

    else if (pic == "snapchat") { 
     $("#snapchat").removeClass("show").addClass("hide"); 
     $("#twitter").removeClass("hide").addClass("show"); 
     $("span").text("Twitter"); 
    } 

    else if (pic == "twitter") { 
     $("#twitter").removeClass("show").addClass("hide"); 
     $("#facebook").removeClass("hide").addClass("show"); 
     $("span").text("Facebook"); 
    } 

}); 

Hier ist meine CSS:

.hide { 
display: none; 
} 

.show { 
display: inline; 
} 

Und hier ist mein HTML:

<div id="selection"> 
    <img id="instagram" class="show" src="img/instagram.png"> 
    <img id="snapchat" src="img/snapchat.png"> 
    <img id="twitter" src="img/twitter.png"> 
    <img id="facebook" src="img/facebook.png"> 
</div> 

Vielen Dank für Ihre Antworten!

+0

Andy: Haben Sie ein Bild zur Zeit angezeigt werden soll? und dann nächste nächste, oder? was ist richtig ? –

+0

Hallo, ja ich möchte zu der Zeit ein Bild zeigen und dann als nächstes weiter. #right ist eine Pfeil-Svg-Datei. –

+0

Loggen Sie den Wert von "Pic" zur Konsole, und seien Sie überrascht. – CBroe

Antwort

0

Sie müssen die Klassen zwischen den Indizes des Bildes tauschen.

Dies wird als Zyklus betrachtet, wenn Sie auf dem letzten Index dann zuerst mit dann beginnen sollen.

Überprüfen Sie das Arbeits-Snippet.

//Apply the hide to all the images except first one 
 
$('#selection img').not(":eq(0)").addClass("hide"); 
 
var currentIndex=0; 
 
var newIndex=0; 
 
$("#right").on("click" , function() { 
 
    //Check is it a last index 
 
    var isLast = $('#selection img').last().hasClass('show'); 
 
    currentIndex = $('#selection img.show').index(); 
 
    //If it is last index then hide the same and show the first image 
 
    if(isLast) 
 
    { 
 
      $('#selection img:eq('+currentIndex+')') 
 
       .removeClass('show') 
 
       .addClass('hide'); 
 

 
      $('#selection img:eq(0)') 
 
       .removeClass('hide') 
 
       .addClass('show'); 
 
    } 
 
    else 
 
    { 
 
      $('#selection img:eq('+currentIndex+')') 
 
       .removeClass('show') 
 
       .addClass('hide'); 
 

 
      $('#selection img:eq('+(currentIndex+1)+')') 
 
       .removeClass('hide') 
 
       .addClass('show'); 
 
    } 
 
    $('#output').html($('#selection img.show').attr('id')); 
 
});
.hide { 
 
display: none; 
 
} 
 

 
.show { 
 
display: inline; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selection"> 
 
    <img id="instagram" class="show" src="img/instagram.png"> 
 
    <img id="snapchat" src="img/snapchat.png"> 
 
    <img id="twitter" src="img/twitter.png"> 
 
    <img id="facebook" src="img/facebook.png"> 
 
</div> 
 
<span id="output"></span> 
 
<a href="#" id="right">Right</a>

+0

Hallo @loading .. Es funktioniert auch einwandfrei. Wo kann ich den Text chnage hinzufügen? Wenn Instagram-Logo angezeigt wird, heißt es "Instagram". Wenn das Snapchat-Logo angezeigt wird, wird "Snapchat" angezeigt. Auch wenn Sie das Snippet mit einem hinzugefügten Pfeil nach links aktualisieren könnten. Also seine beide Seiten. Vielen Dank –

+0

@AndyMac: siehe es erhält automatisch die ID des ausgewählten/gezeigten Bildes, als einen Text zu betrachten. –

+0

Ich habe Text in einem

0

vielleicht versuchen, wie dieser somerthing:

$("#right").on("click" , function() { 

     var pic = $("#selection img").attr("id"); 
     $("#selection img").removeClass("show").addClass("hide"); 
     $("#selection #"+pic).removeClass("hide").addClass("show"); 
     $("span").text(pic); 
    }); 

}); 
+0

Ich habe es gerade getestet und es hat nicht funktioniert. –

0

über diese auf eine Geige laden! Dies sollte dein Problem lösen.

Nach dem Betrachten Ihrer Frage, es sieht unsicher, was Sie eigentlich fragen. Versuchen Sie, eine Galerie zu erstellen? Gibt es einen Grund, warum die anderen Geschwister nicht haben class="hide"

Wenn Sie nicht bemerkt haben, ist Ihre pic Variable nicht gleich einem Bild.

var pic = $("#selection img").attr("id"); 

Was Sie fragen, ist "Wenn die Bilder in #selection haben eine id" (die alle von ihnen ist) Vielleicht bedeutete Sie

var pic = $("#selection img").hasClass("show"); 

https://jsfiddle.net/swvq6ves/ (alte Geige)

Hier ist die neue Geige mit einem vorherigen Button! https://jsfiddle.net/swvq6ves/1/

+0

Danke @conorReidd! Funktioniert einwandfrei! Schätze die Hilfe :) –

+0

Könntest du die Geige aktualisieren, damit sie auch für den linken Pfeil funktioniert? So geht es zurück zum vorherigen Bild. Wie eine Bildauswahloption. –

+0

@AndyMac was passiert ist, wenn ich das letzte Bild erreicht habe, weil es nicht das letzte Bild zeigt, und wenn ich die ID geändert habe, wird es nicht funktionieren .. Es ist also kein guter Weg, mit Text-Matching zu kodieren. –

Verwandte Themen