如果我想在不同的结构上使用相同的解决方案,比如dl dt模块而不是表,该怎么办?我将如何构造JQuery代码以显示所选产品的标签?
我尝试了多种方法来显示最近的标签,但都没有效果。
请参阅要演示的代码段。
<div class="attributes">
<dl>
<dt id="product_attribute_label_390"><label class="text-prompt"> CANVAS PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_390">
<div class="select-wrap" data-children-count="1"><select name="product_attribute_390"
id="product_attribute_390">
<option value="0">---</option>
<option value="2391">8" X 12" [+$26.00]</option>
<option value="2392">10" X 12" [+$28.00]</option>
<option value="2393">16" X 20" [+$35.00]</option>
<option value="2394">20" X 24" [+$60.00]</option>
<option value="2395">24" X 36" [+$50.00]</option>
<option value="2396">30" X 40" [+$66.00]</option>
<option value="2397">36" X 48" [+$142.00]</option>
<option value="2398">40" X 60" [+$200.00]</option>
</select>
<span class="select-box">
<span class="select-inner">---</span>
</span>
</div>
</dd>
<dt id="product_attribute_label_386"><label class="text-prompt"> ACRYLIC PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_386">
<div class="select-wrap" data-children-count="1"><select name="product_attribute_386"
id="product_attribute_386">
<option value="0">---</option>
<option value="2361">8" x 12" [+$70.00]</option>
<option value="2362">12" X 16" [+$80.00]</option>
<option value="2363">12" X 36" [+$160.00]</option>
<option value="2364">16" x 20" [+$110.00]</option>
<option value="2365">20" x 24" [+$208.00]</option>
<option value="2366">20" x 30" [+$220.00]</option>
<option value="2367">30" x 40" [+$280.00]</option>
</select>
<span class="select-box">
<span class="select-inner">---</span>
</span>
</div>
</dd>
<dt id="product_attribute_label_387"><label class="text-prompt"> METAL PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_387">
<div class="select-wrap" data-children-count="1"><select name="product_attribute_387"
id="product_attribute_387">
<option value="0">---</option>
<option value="2368">8" x 12" [+$60.00]</option>
<option value="2369">12" x 16" [+$70.00]</option>
<option value="2370">12" x 36" [+$252.00]</option>
<option value="2371">16" x 20" [+$80.00]</option>
<option value="2372">20" x 24" [+$160.00]</option>
<option value="2373">20" x 30" [+$220.00]</option>
<option value="2374">30" x 40" [+$356.00]</option>
</select>
<span class="select-box">
<span class="select-inner">---</span>
</span>
</div>
</dd>
</dl>
</div>
我尝试使用JQuery隐藏未选择的标签,但找不到有选择地显示活动选择的方法。
null
$(document).ready(function () {
$("select").each(function () {
$(this).on("change", function () {
var val = $(this).val();
//alert(val);
console.log(val);
if (val > 0) {
$('.add-to-cart').show();
$('.attribute-description').hide();
$("select").hide();
$('.text-prompt').hide();
$(this).show();
$(this).closest('.text-prompt').show();
$(this).closest('label').find('.text-prompt').show();
$(this).closest('dt label .text-prompt').show();
} else {
$("select").show();
$('.select-wrap').show();
$('.attribute-description').show();
$('.add-to-cart').hide();
$('.text-prompt').show();
}
});
});
});
<div class="attributes">
<dl>
<dt id="product_attribute_label_390">
<label class="text-prompt"> CANVAS PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_390">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_390"
id="product_attribute_390">
<option value="0">---</option>
<option value="2391">8" X 12" [+$26.00]</option>
<option value="2392">10" X 12" [+$28.00]</option>
<option value="2393">16" X 20" [+$35.00]</option>
<option value="2394">20" X 24" [+$60.00]</option>
<option value="2395">24" X 36" [+$50.00]</option>
<option value="2396">30" X 40" [+$66.00]</option>
<option value="2397">36" X 48" [+$142.00]</option>
<option value="2398">40" X 60" [+$200.00]</option>
</select>
</div>
</dd>
<p>
<dt id="product_attribute_label_386">
<label class="text-prompt"> ACRYLIC PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_386">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_386"
id="product_attribute_386">
<option value="0">---</option>
<option value="2361">8" x 12" [+$70.00]</option>
<option value="2362">12" X 16" [+$80.00]</option>
<option value="2363">12" X 36" [+$160.00]</option>
<option value="2364">16" x 20" [+$110.00]</option>
<option value="2365">20" x 24" [+$208.00]</option>
<option value="2366">20" x 30" [+$220.00]</option>
<option value="2367">30" x 40" [+$280.00]</option>
</select>
</div>
</dd>
<p>
<dt id="product_attribute_label_387">
<label class="text-prompt"> METAL PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_387">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_387" id="product_attribute_387">
<option value="0">---</option>
<option value="2368">8" x 12" [+$60.00]</option>
<option value="2369">12" x 16" [+$70.00]</option>
<option value="2370">12" x 36" [+$252.00]</option>
<option value="2371">16" x 20" [+$80.00]</option>
<option value="2372">20" x 24" [+$160.00]</option>
<option value="2373">20" x 30" [+$220.00]</option>
<option value="2374">30" x 40" [+$356.00]</option>
</select>
</div>
</dd>
</dl>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
null
您可以检查select的值是否不是0
(取决于此)使用$(this).closest(“dd”).prev().find(“.text-prompt”)
使用$(“.attribute-description”).show()
显示您的标签。
演示代码:
null
$(document).ready(function() {
$("select").on("change", function() {
var val = $(this).val();
if (val != '0') {
$("dd").not($(this).closest("dd")).hide() //hide other
$("dt").not($(this).closest("dd").prev()).hide()
//show label
$(this).closest("dd").prev().find(".text-prompt").show()
$(this).closest("dd").prev().find(".attribute-description").hide()
} else {
$("dd ,dt").show()
$(".attribute-description").show()
}
});
});
<div class="attributes">
<dl>
<dt id="product_attribute_label_390">
<label class="text-prompt"> CANVAS PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_390">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_390" id="product_attribute_390">
<option value="0">---</option>
<option value="2391">8" X 12" [+$26.00]</option>
<option value="2392">10" X 12" [+$28.00]</option>
<option value="2393">16" X 20" [+$35.00]</option>
<option value="2394">20" X 24" [+$60.00]</option>
<option value="2395">24" X 36" [+$50.00]</option>
<option value="2396">30" X 40" [+$66.00]</option>
<option value="2397">36" X 48" [+$142.00]</option>
<option value="2398">40" X 60" [+$200.00]</option>
</select>
</div>
</dd>
<p>
<dt id="product_attribute_label_386">
<label class="text-prompt"> ACRYLIC PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_386">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_386" id="product_attribute_386">
<option value="0">---</option>
<option value="2361">8" x 12" [+$70.00]</option>
<option value="2362">12" X 16" [+$80.00]</option>
<option value="2363">12" X 36" [+$160.00]</option>
<option value="2364">16" x 20" [+$110.00]</option>
<option value="2365">20" x 24" [+$208.00]</option>
<option value="2366">20" x 30" [+$220.00]</option>
<option value="2367">30" x 40" [+$280.00]</option>
</select>
</div>
</dd>
<p>
<dt id="product_attribute_label_387">
<label class="text-prompt"> METAL PRINTS </label>
<div class="attribute-description">
<p>Please Choose your Size:</p>
</div>
</dt>
<dd id="product_attribute_input_387">
<div class="select-wrap" data-children-count="1">
<select name="product_attribute_387" id="product_attribute_387">
<option value="0">---</option>
<option value="2368">8" x 12" [+$60.00]</option>
<option value="2369">12" x 16" [+$70.00]</option>
<option value="2370">12" x 36" [+$252.00]</option>
<option value="2371">16" x 20" [+$80.00]</option>
<option value="2372">20" x 24" [+$160.00]</option>
<option value="2373">20" x 30" [+$220.00]</option>
<option value="2374">30" x 40" [+$356.00]</option>
</select>
</div>
</dd>
</dl>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>