Question

我正在使用Wordpress和woo-commerce创建一个Javascript自定义表单。定制的产品是腕带。我已经创建了我的表单，它已经到位，我不需要Wordpress或woo-commerce的帮助。

我的表单的工作方式与在此网站上的工作方式相同：http://ukwristbands.com/。客户需要选择/经历各种选项，他们应该能够看到配置产品的外观。

我设法在腕带上显示字体以及不同的字体大小和自定义打印文本但是我需要在产品上显示图标以及文本和徽标的位置会发生变化取决于用户选择的选项。

我的表单是使用woo-commerce生成的，在我的javascript中，我使用select下拉列表的ID或类来定位相关字段onChange。

这是我的JS：

//wristband colour & font selectors
var selectedScheme = 'Aqua';
$('#pa_colour').change(function(){
    $('#band-viewer').removeClass(selectedScheme).addClass($('#pa_colour option:selected').attr('class'));
    selectedScheme = $('#pa_colour option:selected').attr('class');

});
var selectedType = 'Georgia';
$('#pa_typeface').change(function(){
    $('#band-viewer').removeClass(selectedType).addClass($('#pa_typeface option:selected').attr('class'));
    selectedType = $('#pa_typeface option:selected').attr('class');
});
var selectedFontSize = 'Small';
$('#pa_font-size').change(function(){
    $('#band-viewer').removeClass(selectedFontSize).addClass($('#pa_font-size option:selected').attr('class'));
    selectedFontSize = $('#pa_font-size option:selected').attr('class');
});

每次选择更改时，JS都会将选定的选项类添加到带有band-viewer ID的div中，这会触发我的CSS以显示更改。

以下是woo-commerce生成的下拉列表：

<select id="pa_font-size" name="attribute_pa_font-size" class="hasCustomSelect" style="-webkit-appearance: menulist-button; width: 599px; position: absolute; opacity: 0; height: 74px; font-size: 37px;">
  <option value="">Choose an option…</option>
  <option value="small" selected="selected" class="small     active">Small</option>
  <option value="medium" class="medium active">Medium</option>
  <option value="large" class="large active">Large</option>
</select>

我想确保选择的下拉菜单相互协作，并显示配置的产品，其中包含用户选择的所有选项，以便他们可以看到他们的腕带会是什么样子。

Javascript Customiser

0 个答案: