jQuery удалить текущий активный класс на каждом триггере

Question

Я написал функцию jQuery, которая считывает выбранное значение параметра из поля выбора и добавляет активный класс в div, который соответствует этому значению.

jQuery(".product-customize select").on("change", function() { 
    var activeLocation = jQuery(this).find('option:selected').text().toLowerCase().replace(/ /, ''); 
    var dot = '.'; 
    var activeLocationDiv = jQuery('.locations').find(dot + activeLocation); 
    activeLocationDiv.addClass('active'); 
}); 

Это работает, но я стараюсь добиться того, чтобы каждый раз, когда окно выбора срабатывает, текущий активный класс будет удален, так что у вас всегда есть только один активный DIV.

Answer 1

jQuery(".product-customize select").on("change", function() { 
$('.active').removeClass('active');//remove class active from all elements 
var activeLocation = jQuery(this).find('option:selected').text().toLowerCase().replace(/ /, ''); 
var dot = '.'; 
var activeLocationDiv = jQuery('.locations').find(dot + activeLocation); 
activeLocationDiv.addClass('active'); 
}); 

Answer 2

Вы можете продолжить сцепление код, как это удалить класс active из других option братьев и сестер:

activeLocationDiv.addClass('active').find('option:selected').siglings('option').removeClass('active'); 

Окончательный код выглядит следующим образом:

jQuery(".product-customize select").on("change", function() { 
    var activeLocation = jQuery(this).find('option:selected').text().toLowerCase().replace(/ /, ''); 
    var dot = '.'; 
    var activeLocationDiv = jQuery('.locations').find(dot + activeLocation); 
     activeLocationDiv.addClass('active').find('option:selected').siglings('option').removeClass('active'); 
}); 

Answer 3

Ваша проблема решается здесь использования .removeclass (''); до спускового крючка. Ниже приведено

jQuery(".product-customize select").on("change", function() { 

    var activeLocation = jQuery(this).find('option:selected').text().toLowerCase().replace(/ /, ''); 
    var dot = '.'; 
    var activeLocationDiv = jQuery('.locations').find(dot + activeLocation); 
    $('.active').removeClass('active');// Place it here 
    activeLocationDiv.addClass('active'); 
    });