Question

So I’m making this small webstore with simplecartjs. I wanted to show a different product image when user selects a new type of certain product, and wrote this. It works, but there probably is an easier way to do this?
From 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';
?>

So if there’s easier ways to accomplish this, I’m willing to learn, as I’m a total beginner with jQuery.

Answer 1

You could try this: http://jsfiddle.net/3nSuE/1/ or much cut down code but changed your HTML a bit: http://jsfiddle.net/sxJh8/

simple chained version:

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

OR http://jsfiddle.net/sxJh8/ (Minor changes to 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();

    });
});​