下面是我目前正在使用的脚本。我们展示了名称不同的选项,但有些选项会显示相同的选项(IE Sap Cherry和Cherry会显示相同的完成)。试图让它达到如果选择了一个选项,它会隐藏其他选项不显示的程度。我如何才能让它达到一些选项共享同一个选择器的程度?
我这样写是因为我们的网站使用了一个插件,它可以帮助我们轻松地添加选项。这个脚本允许我们有条件地显示选项,并轻松地管理更改。我无法控制它如何生成HTML,所以我必须解决这个问题。
jQuery(function($) {
function woodSelection(woodType) {
var classSelector = "." + woodType.replace(/\s+/g, '-').toLowerCase() + "-stains-div";
$(classSelector).hide();
$('#wood-choices input[type="radio"]').on('change', function() {
if ($(this).val().startsWith(woodType)) {
$(classSelector).show();
$(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
} else {
$(classSelector).hide();
}
});
}
// Call the function when the document is ready
$(document).ready(function() {
var woodTypes = ['Oak', 'Brown Maple', 'Wormy Maple', 'Cherry', 'Sap Cherry', 'Rustic Cherry', 'Hickory', 'Rustic Hickory', 'Hard Maple', 'Quartersawn White Oak', 'Rustic Quartersawn White Oak', 'Walnut', 'Rustic Walnut'];
$.each(woodTypes, function(index, woodType) {
woodSelection(woodType);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wood-choices">
<label class="tm-epo-field-label" for="tmcp_choice_0">
<input type="radio" name="tmcp_radio_0" id="tmcp_choice_0" value="Oak_0">
<span>Oak</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_1">
<input type="radio" name="tmcp_radio_0" value="Rustic Cherry_1">
<span>Rustic Cherry</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_2">
<input type="radio" name="tmcp_radio_0" value="Rustic Hickory_2">
<span>Rustic Hickory</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_3">
<input type="radio" name="tmcp_radio_0" value="Brown Maple_3">
<span>Brown Maple</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_4">
<input type="radio" name="tmcp_radio_0" value="Sap Cherry_4">
<span>Sap Cherry</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_5">
<input type="radio" name="tmcp_radio_0" value="Hard Maple_5">
<span>Hard Maple</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_6">
<input type="radio" name="tmcp_radio_0" value="Hickory_6">
<span>Hickory</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_7">
<input type="radio" name="tmcp_radio_0" value="Cherry_7">
<span>Cherry</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_8">
<input type="radio" name="tmcp_radio_0" value="Quartersawn White Oak_8">
<span>Quartersawn White Oak</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_9">
<input type="radio" name="tmcp_radio_0" value="Rustic Walnut_9">
<span>Rustic Walnut</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_10">
<input type="radio" name="tmcp_radio_0" value="Walnut_10">
<span>Walnut</span>
</label>
<label class="tm-epo-field-label" for="tmcp_choice_11">
<input type="radio" name="tmcp_radio_0" value="Wormy Maple_11">
<span>Wormy Maple</span>
</label>
</div>
<div class="stain-container">
<div class="oak-stains-div wood-swatch-div">
<p>Oak finishes shown here</p>
</div>
<div class="brown-maple-stains-div wormy-maple-stains-div wood-swatch-div">
<p>Brown & Wormy finishes shown here</p>
</div>
<div class="cherry-stains-div rustic-cherry-stains-div sap-cherry-stains-div wood-swatch-div">
<p>Rustic, Sap, & Clean Cherry finishes shown here</p>
</div>
<div class="hard-maple-stains-div wood-swatch-div">
<p>Hard Maple finishes shown here</p>
</div>
<div class="hickory-stains-div rustic-hickory-stains-div wood-swatch-div">
<p>Rustic & Clean Hickory finishes shown here</p>
</div>
<div class="rustic-quartersawn-white-oak-stains-div quartersawn-white-oak-stains-div wood-swatch-div">
<p>Rustic & Clean Quartersawn White Oak finishes shown here</p>
</div>
<div class="rustic-walnut-stains-div walnut-stains-div wood-swatch-div">
<p>Rustic & Clean Walnut finishes shown here</p>
</div>
</div>
我也尝试了Map选项,以便一些将配对,但这也不起作用:
jQuery(function($) {
function woodSelection(woodType, classSelector) {
$(classSelector).hide();
$('#wood-choices input[type="radio"]').on('change', function() {
if ($(this).val().startsWith(woodType)) {
$(classSelector).show();
$(".wood-swatch-div").not(classSelector).find("input[type='radio']").prop("checked", false);
} else {
$(classSelector).hide();
}
});
}
// Call the function when the document is ready
$(document).ready(function() {
var woodTypes = [
{ name: 'Oak', selector: '.oak-stains-div' },
{ name: 'Brown Maple', selector: '.brown-maple-stains-div' },
{ name: 'Wormy Maple', selector: '.brown-maple-stains-div' },
{ name: 'Cherry', selector: '.cherry-stains-div' },
{ name: 'Sap Cherry', selector: '.cherry-stains-div' },
{ name: 'Rustic Cherry', selector: '.cherry-stains-div' },
{ name: 'Hickory', selector: '.hickory-stains-div' },
{ name: 'Rustic Hickory', selector: '.hickory-stains-div' },
{ name: 'Hard Maple', selector: '.hard-maple-stains-div' },
{ name: 'Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
{ name: 'Rustic Quartersawn White Oak', selector: '.quartersawn-white-oak-stains-div' },
{ name: 'Walnut', selector: '.walnut-stains-div' },
{ name: 'Rustic Walnut', selector: '.walnut-stains-div' }
];
$.each(woodTypes, function(index, woodType) {
woodSelection(woodType.name, woodType.selector);
});
});
});
1条答案
按热度按时间50pmv0ei1#
我将创建一个map,其中每个单选值作为键,对应的CSS选择器作为值,而不是
woodTypes
数组。我们可以在所有的radio中添加一个change事件监听器,当change事件的处理程序被调用时,它可以得到被点击的radio的value属性--要显示的CSS选择器,然后我们可以遍历所有的
.wood-swatch-div
元素,如果元素有选择器,就显示它,否则就隐藏它。Oak
代替Oak_0
),然后在我们获得所选单选按钮的值-$(this).val().replace(/_\d*$/, '')
时删除索引来解决这个约束。代码现在变为:
我创建了一个fiddle以供参考。