1

そのため、いくつかの理由から、ユーザーが希望の色とサイズを選択するときに、商品名に商品の色とサイズを追加する必要があります。ただし、ユーザーが両方の選択を選択した場合にのみh2を更新できたため、選択が変更されるたびにヘッダーを更新する必要があります。

HTML：

<h2 class="item_name" style="float:left;">Quartz-kalvot</h2>

<br><br><strong>V&auml;ri</strong><br />
    <select class="item_Color">
    <option value="Ei valintaa">Valitse väri</option>
    <option value="Violet">Violet</option>
    <!-- ... -->
</select>
<br />
<strong>Koko</strong><br />
    <select class="item_size">
    <option value="Ei valintaa">Valitse koko</option>
    <option data-price="20.00&euro;">25cm x 30cm</option>
    <option data-price="30.00&euro;">50cm x 30cm</option>
    <option data-price="45.00&euro;">100cm x 50cm</option>
</select>

JavaScript：

$(".item_size, item_Color").change(function() {
    var vari = $(".item_Color").val();
    var koko = $(".item_size").val();
    $('.item_name').html("Quartz-kalvot (" + vari + ")(" + koko + ")");
});​

フィドル： http： //jsfiddle.net/WVCzY/

4

5 に答える 5

2

.ここでクラスセレクターのを忘れました。

$(".item_size, item_Color")...

したがって、イベントはバインドされず、修正されます。

$(".item_size, .item_Color")...
于 2012-09-28T11:32:53.017 に答える
2

http://jsfiddle.net/WVCzY/1/

$(document).ready(function () {
    $(".item_size, .item_Color").change(function () {
     var vari = $(".item_Color").val();
     var koko = $(".item_size").val();
      $('.item_name').html("Quartz-kalvot ("+vari+")("+koko+")");
     });

});​

.あなたは最初の前に単に行方不明でした.item_Color

于 2012-09-28T11:33:02.350 に答える
1

追加するのを忘れました。前item_Color

$(document).ready(function () {
    //*************. here
    $(".item_size, .item_Color").change(function () {
     var vari = $(".item_Color").val();
     var koko = $(".item_size").val();
      $('.item_name').html("Quartz-kalvot ("+vari+")("+koko+")");
     });

});​
于 2012-09-28T11:32:47.547 に答える
0

ドットを追加するのを忘れましたitem_Color

このように見えるはずです

  $(".item_size, .item_Color").change(function () {
于 2012-09-28T11:35:38.647 に答える
0

H2を関数に更新し、変更イベントで呼び出します。 

$(document).ready(function () {
    $(".item_size").change(function () {
        updateH2();
     });

    $(".item_Color").change(function() {
     updateH2();   
    });

});

function updateH2() {
     var vari = $(".item_Color").val();
     var koko = $(".item_size").val();
      $('.item_name').html("Quartz-kalvot ("+vari+")("+koko+")");
}
于 2012-09-28T11:32:48.343 に答える