0

所以我正在用 simplecartjs 制作这个小型网上商店。我想在用户选择某种产品的新类型时显示不同的产品图像，并写了这个。它有效，但可能有更简单的方法来做到这一点？来自 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€&lt;/span>
   <br>
<a class="item_add" href="javascript:;"> Lisää koriin </a></p>
</div>
<br>

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

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

4

3 回答 3

0

你可以试试这个： 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();

    });
});​
于 2012-07-26T11:06:05.433 回答
0

嗯 - 你知道，这有点啰嗦，但老实说，它是有效的，试图简化它可能只会让它复杂化！

我能看到的唯一方法是 on (".item_type").change，调用一个隐藏所有的新函数，然后每种类型只调用该图像的单个显示。

   $(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();
        }
    });
});​
于 2012-07-26T11:08:32.157 回答
0

这看起来很不错。

为了节省一些代码，我会添加第二个类，比如productImage所有IMG标签。然后你可以在显示你想要的之前隐藏所有内容：

...  
$('.productImage').hide();  
...  
if ($(this).val() == "Mattamusta") {  
    $('.product_image4').show();
  }
于 2012-07-26T11:11:33.743 回答