Jquery 在特定选择上显示不同的图像

所以我用simplecartjs制作了这个小的webstore。我想在用户选择某种新类型的产品时显示一个不同的产品图像，并写了这篇文章。这是可行的，但可能有更简单的方法？ 从teipit.php：

<?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';
?>

$（文档）.ready（函数（）{
$（“.item_lengh”）.change（函数（）{
$（'.item_price'）.html（$（'option:selected'，this）.data（'price'））；
});
$（“.item_type”）.change（函数（）{
if（$（this.val（）=“Harjattu alumini”）{
$（'.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（）；
}
});
});
泰比特

瓦利泽·科科
25厘米x150厘米
50厘米x150毫米
100厘米x150厘米


瓦利泽·沃里
阿鲁米尼酒店
Hiilikuitu（穆斯塔）
Hiilikuitu（瓦尔科宁）
马塔莫斯塔




0.00€

因此，如果有更简单的方法来实现这一点，我愿意学习，因为我完全是jQuery的初学者

您可以尝试以下方法：或大量精简代码，但稍微更改了HTML：

简单链接版本：

$(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();
        }
    });
});​

或（对html的细微更改）

---

嗯，你知道，这有点冗长，但老实说，它是有效的，试图简化它可能只是使它复杂化

我能看到的唯一方法是打开（“.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();
        }
    });
});​

---

看起来不错

为了保存一些代码，我将向所有IMG标记添加第二个类，比如

productImage

。然后，您可以在显示所需内容之前隐藏所有内容：

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

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