Question

因此，出于某些原因，当用户选择他想要的颜色和尺寸时，我需要将项目颜色和项目大小添加到产品名称。但是，当用户选择了两个选项时，我只设法更新了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/

Answer 1

您忘记了此类选择器的.;

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

所以事件不会绑定，要修复;

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

Answer 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

Answer 3

你忘了添加。在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+")");
     });

});

Answer 4

使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+")");
}

Answer 5

您忘记将点添加到item_Color

看起来应该是这样的

  $(".item_size, .item_Color").change(function () {

在更改时更新h2

5 个答案: