특정 선택에 다른 이미지 표시

Question

그래서이 간단한 웹 스토어를 simplecartjs로 만들고 있습니다. 사용자가 특정 제품의 새로운 유형을 선택할 때 다른 제품 이미지를 보여주고 싶었습니다. 작동하지만 더 쉬운 방법이있을 것입니다. teipit.php에서 :이 작업을 수행하는 쉬운 방법이 있다면 내가 jQuery로 총 초보자 해요로

<?php 
include 'nav.php'; 
?><br><br> 
<p> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".item_lenght").change(function() { 
     $('.item_price').html($('option:selected', this).data('price')); 
    }); 
    $(".item_type").change(function() { 
     if ($(this).val() == "Harjattu Alumiini") { 
      $('.product_image1').show(); 
      $('.product_image2').hide(); 
      $('.product_image3').hide(); 
      $('.product_image4').hide(); 
     } 
     if ($(this).val() == "Hiilikuitu (Musta)") { 
      $('.product_image1').hide(); 
      $('.product_image2').show(); 
      $('.product_image3').hide(); 
      $('.product_image4').hide(); 
     } 
     if ($(this).val() == "Hiilikuitu (Valkoinen)") { 
      $('.product_image1').hide(); 
      $('.product_image2').hide(); 
      $('.product_image3').show(); 
      $('.product_image4').hide(); 
     } 
     if ($(this).val() == "Mattamusta") { 
      $('.product_image1').hide(); 
      $('.product_image2').hide(); 
      $('.product_image3').hide(); 
      $('.product_image4').show(); 
     } 
    }); 
}); 

</script> 
<div class="simpleCart_shelfItem"> 
    <h2 class="item_name">Teipit </h2> 
<p>  
<div class="product_image_container"> 
<img class="product_image1" src="kuvat/teipit/harja-alu.jpg "> 
<img class="product_image2" style="display:none;" src="kuvat/teipit/hiilimusta.jpg"> 
<img class="product_image3" style="display:none;" src="kuvat/teipit/hiilivalkoinen.jpg"> 
<img class="product_image4" style="display:none;" src="kuvat/teipit/mattamusta.jpg"> 
</div> 
     <select class="item_lenght" name="size"> 
     <option value="Tyhjä">Valitse koko</option> 
     <option data-price="47.00€" value="25cm"> 25cm x 150cm </option> 
     <option data-price="48.00€" value="50cm"> 50cm x 150xm</option> 
     <option data-price="49.00€" value="100cm"> 100cm x 150cm </option> 
     </select><br> 
     <select class="item_type" name="type"> 
     <option value="Ei valintaa">Valitse väri</option> 
     <option value="Harjattu Alumiini"> Harjattu Alumiini </option> 
     <option value="Hiilikuitu (Musta)"> Hiilikuitu (Musta) </option> 
     <option value="Hiilikuitu (Valkoinen)"> Hiilikuitu (Valkoinen) </option> 
     <option value="Mattamusta"> Mattamusta </option> 
     </select><br> 
    <input type="text" value="1" class="item_Quantity"><br> 
    <span class="item_price">0.00€</span> 
    <br> 
<a class="item_add" href="javascript:;"> Lisää koriin </a></p> 
</div> 
<br> 

<?php 
include 'footer.php'; 
?> 

그래서, 나는 배우고 기꺼이.

Answer 1

이 작업을 시도 할 수 : http://jsfiddle.net/3nSuE/1/또는은 많은 코드를 줄일 수 있지만 HTML 조금 변경 : http://jsfiddle.net/sxJh8/

간단한 연쇄 버전 :

$(document).ready(function() { 
    $(".item_lenght").change(function() { 
     $('.item_price').html($('option:selected', this).data('price')); 
    }); 
    $(".item_type").change(function() { 
     if ($(this).val() == "Harjattu Alumiini") { 
      $('.product_image1').show(); 

     } 
     if ($(this).val() == "Hiilikuitu (Musta)") { 

      $('.product_image2').show(); 
      $('.product_image1,.product_image3,.product_image4').hide(); 

     } 
     if ($(this).val() == "Hiilikuitu (Valkoinen)") { 

      $('.product_image3').show(); 
      $('.product_image1,.product_image2,.product_image4').hide(); 

     } 
     if ($(this).val() == "Mattamusta") { 
      $('.product_image1,.product_image2,.product_image3').hide(); 

      $('.product_image4').show(); 
     } 
    }); 
});​ 

또는http://jsfiddle.net/sxJh8/ (사소한 변경 HTML로)

$(document).ready(function() { 
    $(".item_lenght").change(function() { 
     $('.item_price').html($('option:selected', this).data('price')); 
    }); 
    $(".item_type").change(function() { 
     $('.product_image1,.product_image2,.product_image3,.product_image4').hide(); 

      classname = $(".item_type option:selected").prop("class"); 

      $('.'+classname).show(); 

    }); 
});​ 

Answer 2

hm 아시다시피, 조금 오래되었습니다 만, 솔직히 말해서, 작동하고, 그것을 단순화하려고하면 복잡해질 수 있습니다!

내가 볼 수있는 유일한 방법은 (".item_type") 변경, 모든 것을 숨기는 새로운 기능을 호출 한 다음 유형별로 해당 이미지의 단일 프로그램을 호출하는 것입니다.

$(document).ready(function() { 
    $(".item_lenght").change(function() { 
    $('.item_price').html($('option:selected', this).data('price')); 
    }); 
    $(".item_type").change(function() { 
     $('.product_image1,.product_image2,.product_image3,.product_image4,').hide(); 

     if ($(this).val() == "Harjattu Alumiini") { 
      $('.product_image1').show(); 

     } 
     if ($(this).val() == "Hiilikuitu (Musta)") { 
      $('.product_image2').show(); 

     } 
     if ($(this).val() == "Hiilikuitu (Valkoinen)") { 
      $('.product_image3').show(); 

     } 
     if ($(this).val() == "Mattamusta") { 
      $('.product_image4').show(); 
     } 
    }); 
});​ 

Answer 3

꽤 괜찮아 보입니다.

일부 코드를 저장하려면 두 번째 클래스 인 productImage을 에 입력하고 모두 IMG 태그를 추가하십시오. 그러면 원하는 것을 표시하기 전에 모든 것을 숨길 수 있습니다.

... 
$('.productImage').hide(); 
... 
if ($(this).val() == "Mattamusta") { 
    $('.product_image4').show(); 
    }