Wie lade ich ein Bild basierend auf 'onclick event'

Question

Ich erstelle eine interaktive und ich habe drei Farben auf einer Seite als divs. Sobald der Benutzer auf eine Farbe klickt, möchte ich, dass das Bild im nächsten Abschnitt als Farbe geladen wird, die vom Benutzer ausgewählt wurde. Ich habe drei Png's Jacken in verschiedenen Farben erstellt und ich muss wissen, wie man die Farbe der Jacke je nachdem, welche Option sie auswählen, lädt.

<div id="page-colour"> 
    <h1>About your jacket.</h1> 
    <h2>Select your leather jacket colour.</h2> 
     <div class="col-md-offset-3 col-md-2"> 
      <div class="black-button colourButton"> 
       <p>Black</p> 
      </div> 
     </div> 

     <div class="col-md-2">     
      <div class="brown-button colourButton"> 
       <p>Brown</p> 
      </div> 
     </div> 

     <div class="col-md-2">     
      <div class="white-button colourButton"> 
       <p>White</p> 
      </div> 
     </div> 

</div> 

<div id="page-build"> 

    <div class="theJacket col-xs-3 col-md-9"> 
     <img class="" src="img/black-jacket.png" class="img-responsive" alt="Black Leather Jacket" width="600" height="750"/> 
    </div> 

</div> 

Dies ist, wie ich die nächste Seite geladen wurde:

$(document).ready(function(){ 
    $('.intro-button').click(function(){ 
     transition("#page-jacket","fade"); 
    }); 


function transition(toPage, type){ 
    var toPage = $(toPage), 
     fromPage = $("#pages .current"); // store the page that is currently showing 

    toPage 
    .addClass("current " + type + " in") 
    .one("msAnimationEnd animationend oAnimationEnd", function(){ // listens for when the animation has finished 
     fromPage.removeClass("current " + type + " out"); 
     toPage.removeClass(type + " in"); 
    }); 
    fromPage.addClass(type + " out "); 
} 

Answer 1

Es gibt verschiedene Möglichkeiten, dies zu tun. Ein offensichtlicher Weg ist, um die Bild-URL in einem zusätzlichen Datenelement in der Jacke div zu speichern:

<div class="col-md-offset-3 col-md-2"> 
    <div class="black-button colourButton" data-imageurl="img/black-jacket.png"> 
     <p>Black</p> 
    </div> 
</div> 

Dann Sie Ihren Skript aktualisieren, um dann, wenn ein Besucher klickt auf einer Jacke Farbe, das Bild aktualisiert:

$(document).ready(function() { 
    $('.colourButton').on('click', function() { 
    $('.theJacket img').attr('src', $(this).data('imageurl')); 
    }); 
}); 

oder geben dem Bild eine ID und rufen sie direkt durch seine ID anstatt über .theJacket img

Plnkr: https://plnkr.co/edit/McyGeEv1o8ysf9ruj8cr?p=preview