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

それはかなり良さそうです。

いくつかのコードを節約するために、2 番目のクラス、たとえばすべての IMG タグproductImageに追加します。次に、必要なものを表示する前にすべてを非表示にすることができます。

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