드롭 다운 메뉴 (선택) - 항목을 선택하면 사진이 선택에 따라 표시됩니다.

Question

항목을 선택하면 각기 다른 제품 이미지를 표시하는 3+ 선택기가 페이지에 표시됩니다. 선택기가 3 개인 경우 이미지를 표시 할 3 개의 div가 있습니다.

나는 코드에 문제가 :

<!-- Selector for Mug --> 
<script type="text/javascript">  
$(function(){ 
    function changeImage(image) 
{ 
    // hide all mainimages   
    $('div.mainimage-mug > div ').hide(); 

    // show the selected image 
    $('div.mainimage-mug > div.' + image).show();   
} 


$('select.mug').change(function(){  
    // get the selected option 
    var selected = $('select.mug option:selected'); 

    changeImage(selected.val()); 
    }); 


}); 

감사합니다!

Answer 1

완전히 다른 접근 방식을 선호합니다. 이미지를 다루고 선택 변경시 이미지를 변경하기 때문에 show hide 메서드를 사용하는 대신 이미지의 src를 변경하는 것이 더 쉽습니다. 더 간단합니다.

<select onchange="change_image(this.value)"> 
    <option value="red">red</option> 
    <option value="green">green</option> 
    <option value="blue">blue</option> 
</select> 

function change_image(color){ 
var dynamic_src=""; 
switch(color){ 
case "red": 
dynamic_src="red_image.jpeg"; 
break; 
case "blue": 
dynamic_src="blue_image.jpeg"; 
break; 
case "green": 
dynamic_src="Green_image.jpeg"; 
break; 
} 

$('#image_to_be_replaced').attr('src',dynamic_src); 
}