'onclickイベント'に基づいてイメージを読み込む方法

Question

私はインタラクティブを作成していますが、divには3つの色があります。ユーザーが色をクリックすると、ユーザーが選択した色として画像が次のセクションに読み込まれます。私は異なる色のジャケットの3つのPNGのを作成したと私は彼らが選択するオプションに応じてジャケットの色を読み込む方法を知る必要があります。

<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> 

は、これは私が次のページをロードされている方法です。

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

はこれを行うための様々な方法があります。 1つの明白な方法は、ジャケットのdiv内の余分なデータ要素に画像のURLを格納することです：

<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> 

その後、あなたのスクリプトを更新し、訪問者は、ジャケットの色をクリックしたときに、その後、画像がリフレッシュされる：

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

や画像にIDを与え、そのIDによって代わりの.theJacket img

を経由して直接呼び出すPlnkr：完璧な作品https://plnkr.co/edit/McyGeEv1o8ysf9ruj8cr?p=preview