我有这个表格,访问者可以在其中选择字母类型;需要该 letterttype 的值才能将其添加为类;所以我们可以在样式表中设置它的样式来预览字体。
<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();
此 javascript 将值添加到 div .product-addon-make-it-personal;但有两个问题:
- 之前的类(class)没有被删除;里面还有其他类;所以我不能总共删除类
- 页面上有多个.addon-select;我可以使用上面 p 标签的 .addon-wrap-2094-lettertype-of-text 类来确保我在右侧选择框上触发吗?
最佳答案
尝试
$('.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
关于javascript - 选择框: add value as class to div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29080499/