Question

我有这个表格，访客可以选择一个lettertype;需要将letterttype的值添加为类;所以我们可以在样式表中设置样式以预览lettertype。

<p class="form-row form-row-wide addon-wrap-2094-lettertype-of-text">
<select class="addon addon-select" name="addon-2094-lettertype-of-   text">
<option value="">Select an option...</option>
<option data-price="" value="lucida-callygraphy-1" >Lucida Callygraphy</option>
<option data-price="" value="verdana-2" >Verdana</option>
<option data-price="" value="bakersville-old-face-3" >Bakersville Old Face</option>
</select>   
</p>

我已经有了一个javascript

$('.addon-select').on('change', function() {
var selected = $(this).find('option:selected').val(); 
$('.product-addon-make-it-personal').addClass($(this).val());
}).change();

这个javascripts将值添加到div .product-addon-make-it-personal;但是有两个问题：

以前的课程没有被删除;还有其他课程;所以我不能完全删除类
页面上有多个.addon-select;我可以使用上面p-tag的.addon-wrap-2094-lettertype-of-text来确保我在右边的选择框中触发。

Answer 1

试

$('.addon-select').on('change', function () {
    $(this).find('option').each(function () {
        $('.product-addon-make-it-personal').removeClass(this.value);
    });
    $('.product-addon-make-it-personal').addClass(this.value);
}).change();

<强> DEMO

Answer 2

var previousClass="";

$('.addon-select').on('change', function() {
//var selected = $(this).find('option:selected').val(); 
$('.product-addon-make-it-personal').removeClass(previousClass).addClass($(this).val());
previousClass=$(this).val();

}).change();

选择框：将值添加为div的类

2 个答案: