Question

所以我正在使用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€</span>
   <br>
<a class="item_add" href="javascript:;"> Lisää koriin </a></p>
</div>
<br>

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

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

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

嗯 - 嗯 - 你知道，它有点啰嗦，但说实话，它有效，并试图简化它可能只会使它复杂化！

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

在某些选择上显示不同的图像

3 个答案: