javascript - Firefox 不会在第二次点击时更新值

Question

所以我接手了一个几乎准备启动的项目，一个可以租赁汽车的网站。我已将服务的主要部分上传到这里:http://erikblomqvist.se/junk/car/

除了颜色更改功能(标题Färgalternativ下的彩色框)之外，一切都运行顺利。它应该将颜色的价格从棕色更新为浅灰色(#4 - #8)——这些颜色要贵一些，因为它们是金属的。 在 Chrome 中，这按计划工作，但在 Firefox 中，如果我首先选择金属颜色，然后选择非金属颜色，然后再次选择相同的金属颜色，则价格不会变回来。第一次它会正确更改，但第二次单击该金属颜色时则不会。 在 Safari 中，价格根本没有变化(我猜如果 Firefox 问题得到解决，Safari 也会得到解决)。

该函数基于data-name在颜色框上，使用此函数检查:

$( '#car-colors .color' ).each(function() {
    $( this ).on( 'click', function() {
        selected_color = undefined; 

        var color_name = $( this ).data('name');

        $( '#car-colors .color' ).not( this ).removeClass('selected');
        $( this ).addClass('selected');

        $( 'option', color_select ).each( function() {
            if( $( this ).val() == color_name ) {
                color_select.find( 'option' ).removeAttr('selected');
                $( this ).attr('selected', 'selected');
            }
        });

        $( '.selected-color-name' ).fadeIn();
        $( '.selected-color-name span' ).html( color_name );

        var selected_color = color_select.children(':selected');

        checkSelectedColor(selected_color);
    });
});

变量color_select定义为$( '#order-color-select' ) .

函数checkSelectedColor在这里定义:

function checkSelectedColor(selected_color) {
    if( selected_color.data('is-metallic') == 'yes' ) {
        color_checkbox.prop('checked', true);
    } else {
        color_checkbox.prop('checked', false);
    }

    color_input.val( selected_color.val() );                
    calculatePrice();
}

我添加了类似 selected_color = undefined 的内容确保变量被重置，但在具有 <option data-is-metallic="yes"> 的颜色之后(在 #order-color-select 内)被第二次选择，它将值处理为“no”而不是“yes”。

我无法理解为什么会这样，尤其是在 Firefox/Safari 中。

我在这里添加了汽车功能的美化版本:http://pastebin.com/i5bup5rx

感谢任何可以引导我朝着解决这个问题的正确方向的帮助!

谢谢

Answer 1

我认为错误在于使用 .attr() 在选择元素中设置所选选项。

相反，您可以只设置选择元素的值，例如

$('#car-colors .color').on('click', function() {
  var color_name = $(this).data('name');

  $('#car-colors .color').not(this).removeClass('selected');
  $(this).addClass('selected');

  $('#order-color-select').val(color_name);

  $('.selected-color-name').fadeIn();
  $('.selected-color-name span').html(color_name);

  var selected_color = color_select.children(':selected');

  checkSelectedColor(selected_color);
});