複数のリストからのJavascript画像の変更

Question

小さなスウォッチ画像から製品のメイン画像を変更する方法を理解しようとしています。主な製品は表と裏の2つの部品で構成されており、主画像にその2つの組み合わせが表示されます。例えばので

：あなたは、それは＃主画像SRCのURLに変更します#backから#frontから、緑、青の選択次に

<img id="main-image"> 

<div id="front"> 
<img src="/red_thumb.jpg"> 
<img src="/green_thumb.jpg> 
</div> 

<div id="back"> 
<img src="/blue_thumb.jpg"> 
<img src="/black_thumb.jpg"> 
</div> 

「/green-blue.jpg "

これは選択ドロップダウンでは動作しますが、代わりに選択できる小さなスウォッチイメージを行うことができるように、リストやイメージが優先されます。画像のクリックによって隠され、制御される選択肢を持つ必要がありますか？

思考？

Answer 1

次のコードを試してみることができます。 以下の解決策のポイントは、jquery.dataを使用してこのタスクを実行できることを認識させることです。それ以上の情報が必要な場合はお知らせください。

次のドキュメントを読むこともお勧めします。 jQuery Data

<img id="main-image"> 

<div id="front"> 
<img src="/red_thumb.jpg" data-image-path="IMAGE_PATH" class="img-thumb"> 
<img src="/green_thumb.jpg" data-image-path="IMAGE_PATH" class="img-thumb"> 
</div> 

<div id="back"> 
<img src="/blue_thumb.jpg" data-image-path="IMAGE_PATH" class="img-thumb"> 
<img src="/black_thumb.jpg" data-image-path="IMAGE_PATH" class="img-thumb"> 
</div> 


<script type="text/javascript"> 
$(function(){ 
$(".img-thumb").click(function(){ 
    var imgPath = $(this).data("image-path"); 
    $(".main-image").attr("src",imgPath); 
    }); 

}); 
</script> 

Answer 2

"データ" 属性の絶好のチャンスのようですね。これを試してみてください：

Htmlの

<img id="main-image"> 

<div id="front"> 
<img src="http://vignette1.wikia.nocookie.net/phobia/images/5/5a/Red.jpg/revision/latest?cb=20161109225243" data-color="red" data-side="front" class="img-thumb"> 
<img src="http://i.imgur.com/eucAMTA.jpg" data-color="green" data-side="front" class="img-thumb"> 
</div> 

<div id="back"> 
<img src="http://www.drodd.com/images14/blue22.jpg" data-color="blue" data-side="back" class="img-thumb"> 
<img src="http://www.solidbackgrounds.com/images/2560x1440/2560x1440-black-solid-color-background.jpg" data-color="black" data-side="back" class="img-thumb"> 
</div> 

Javascriptを

var backcolor = ""; 
var frontcolor = ""; 
$(document).ready(function() { 
    $('img.img-thumb').click(function() { 
    if ($(this).data('side') && $(this).data('color')) { 
     if ($(this).data('side') == "front") { 
     frontcolor = $(this).data('color'); 
     } else { 
     backcolor = $(this).data('color'); 
     } 
    } 
    if (backcolor && frontcolor) { 
     var imgUrl = "/" + frontcolor + "-" + backcolor + ".jpg"; 
     $('#main-image').attr("src", "/" + backcolor + "_" + frontcolor + ".jpg"); 
    } 
    }); 
}); 

jsFiddle：https://jsfiddle.net/mspinks/xqnq2cgz/8/

Answer 3

、このいずれかを試してみて、あなたには、いくつかを必要とする場合の説明を求めます。

$(document).ready(function(){ 
 
    $('#back, #front').find('img').on('click', function(e){ 
 
    $target = $(e.target); 
 
    var color = $target.attr('src').match(/\/(.+)_.*/)[1]; 
 

 
    console.log(color); 
 

 
    $target.parent() 
 
     .find('img') 
 
     .removeClass('active'); 
 

 
    $target.addClass('active'); 
 

 
    $target.siblings('img:not(.active)') 
 
     .css('background-color', ''); 
 

 
    $target.css('backgroundColor', color); 
 
    
 
    if($('#back .active').length && $('#back .active').length){ 
 
     var back = $('#back .active').attr('src').match(/\/(.+)_.*/)[1]; 
 
     var front = $('#front .active').attr('src').match(/\/(.+)_.*/)[1]; 
 

 
     var mainImg = 'http://brewerybranding.com/apparel/tshirts-new/' 
 
        + front + '-' 
 
        + back + '.jpg'; 
 

 
     $('#main-image').attr('src', mainImg);  
 
     console.log(mainImg); 
 
    } 
 
    }); 
 
})

.example { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#main-image, #front img, #back img { 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="example"> 
 
    <img id="main-image"> 
 

 
    <div id="front"> 
 
    <img src="/red_thumb.jpg"> 
 
    <img src="/green_thumb.jpg"> 
 
    </div> 
 

 
    <div id="back"> 
 
    <img src="/blue_thumb.jpg"> 
 
    <img src="/black_thumb.jpg"> 
 
    </div> 
 
</div>