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()在select元素中设置所选选项。

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

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

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

1 个答案: