我试图隐藏表内容的一部分,但隐藏未选中的选项的标签有困难。
我有以下三种选择。如果我的用户选择了其中一个,我想隐藏其他两个,只显示标签和选择的选择。现在,除了标签,我可以隐藏其他的一切。
我尝试添加一个$(this).最近的(“tr td.text-prompt”).show();
和一个$(“tr td.text-prompt”).不是($(this)).hide();
但这并不能隐藏未被选中的组。请帮忙弄清楚...
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();
$('#selectPhoto').hide();
$('.attribute-description').hide();
$("select").hide();
$(this).show();
} else {
$("select").show();
$('#selectPhoto').show();
$('.attribute-description').show();
$('.add-to-cart').hide();
// $(this).hide();
}
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=product_attribute_label_390>
<label class=text-prompt>CANVAS PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_390>
<select name=product_attribute_390 id=product_attribute_390>
<option value=0>---
<option value=2391>8 "X 12 "[+$26.00]
<option value=2392>10 "X 12 "[+$28.00]
<option value=2393>16 "X 20 "[+$35.00]
<option value=2394>20 "X 24 "[+$60.00]
<option value=2395>24 "X 36 "[+$50.00]
<option value=2396>30 "X 40 "[+$66.00]
<option value=2397>36 "X 48 "[+$142.00]
<option value=2398>40 "X 60 "[+$200.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_386>
<label class=text-prompt>ACRYLIC PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_386>
<select name=product_attribute_386 id=product_attribute_386>
<option value=0>---
<option value=2361>8 "x 12 "[+$70.00]
<option value=2362>12 "X 16 "[+$80.00]
<option value=2363>12 "X 36 "[+$160.00]
<option value=2364>16 "x 20 "[+$110.00]
<option value=2365>20 "x 24 "[+$208.00]
<option value=2366>20 "x 30 "[+$220.00]
<option value=2367>30 "x 40 "[+$280.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_387>
<label class=text-prompt>METAL PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_387>
<select name=product_attribute_387 id=product_attribute_387>
<option value=0>---
<option value=2368>8 "x 12 "[+$60.00]
<option value=2369>12 "x 16 "[+$70.00]
<option value=2370>12 "x 36 "[+$252.00]
<option value=2371>16 "x 20 "[+$80.00]
<option value=2372>20 "x 24 "[+$160.00]
<option value=2373>20 "x 30 "[+$220.00]
<option value=2374>30 "x 40 "[+$356.00]
</select>
</td>
</tr>
</table>
null
您可以在同一行中查找.text-prompt
类:
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();
$('#selectPhoto').hide();
$('.attribute-description').hide();
$("select").hide();
$('.text-prompt').hide();
$(this).show();
$(this).closest('tr').find('.text-prompt').show();
} else {
$("select").show();
$('#selectPhoto').show();
$('.attribute-description').show();
$('.add-to-cart').hide();
$('.text-prompt').show();
}
});
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id=product_attribute_label_390>
<label class=text-prompt>CANVAS PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_390>
<select name=product_attribute_390 id=product_attribute_390>
<option value=0>---
<option value=2391>8 "X 12 "[+$26.00]
<option value=2392>10 "X 12 "[+$28.00]
<option value=2393>16 "X 20 "[+$35.00]
<option value=2394>20 "X 24 "[+$60.00]
<option value=2395>24 "X 36 "[+$50.00]
<option value=2396>30 "X 40 "[+$66.00]
<option value=2397>36 "X 48 "[+$142.00]
<option value=2398>40 "X 60 "[+$200.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_386>
<label class=text-prompt>ACRYLIC PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_386>
<select name=product_attribute_386 id=product_attribute_386>
<option value=0>---
<option value=2361>8 "x 12 "[+$70.00]
<option value=2362>12 "X 16 "[+$80.00]
<option value=2363>12 "X 36 "[+$160.00]
<option value=2364>16 "x 20 "[+$110.00]
<option value=2365>20 "x 24 "[+$208.00]
<option value=2366>20 "x 30 "[+$220.00]
<option value=2367>30 "x 40 "[+$280.00]
</select>
</td>
</tr>
<tr>
<td id=product_attribute_label_387>
<label class=text-prompt>METAL PRINTS </label>
<div class=attribute-description>
<p>Please Choose your Size:
</div>
</td>
<td id=product_attribute_input_387>
<select name=product_attribute_387 id=product_attribute_387>
<option value=0>---
<option value=2368>8 "x 12 "[+$60.00]
<option value=2369>12 "x 16 "[+$70.00]
<option value=2370>12 "x 36 "[+$252.00]
<option value=2371>16 "x 20 "[+$80.00]
<option value=2372>20 "x 24 "[+$160.00]
<option value=2373>20 "x 30 "[+$220.00]
<option value=2374>30 "x 40 "[+$356.00]
</select>
</td>
</tr>
</table>