如何在每个父级中将jQuery change(function)设置为目标，并隐藏未选中的div对应值

Question

我在一个页面中有很多表，每个表都有相同的选择，在更改时应该根据值切换/更改div，但目前我只能通过第一个选择来更改它，即使我选择是，它也会显示相应的div，但如果我之后选择否，它只是附加到第一个，而不是隐藏它。

我尝试过使用id、class，下面是我的最新尝试，它使我最接近于使用id、class和Value的解决方案。。但即使在添加并与父母/孩子玩耍后，我发现自己也无法解决问题。。有人有解决方案吗？：-(

这是一个小版本的脚本：

$(function() {
$('#CompanyMobilephone').change(function() {
$(this).parent().find('.CompanyMobilephoneDIV').hide();
$('#' + $(this).val()).show();
});
});

.form_response_warning {
float: center !important;
vertical-align: top;
text-align: center !important;
background-color: #ffc107;
width: 100%;
color: black;
padding: 4px;
font-size: 14px;
font-family: Helvetica;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}
.form_response_info {
float: center !important;
vertical-align: top;
text-align: center !important;
background-color: #17a2b8;
color: white;
padding: 4px;
font-size: 14px;
font-family: Helvetica;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
<tr>
<td>
<table>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
</tr>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
</tr>
</table>
<form name="CompanyMobilephone1" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
<select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
<option selected>Choose...</option>
<option value="yes" class="CompanyMobilephoneYES">Yes</option>
<option value="no" class="CompanyMobilephoneNO">No</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
</tr>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
</tr>
</table>
<form name="CompanyMobilephone2" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
<select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
<option selected>Choose...</option>
<option value="yes" class="CompanyMobilephoneYES">Yes</option>
<option value="no" class="CompanyMobilephoneNO">No</option>
</select>
</td>
</tr>
</table>

Answer 1

将select的id(以及所有重复的id(更改为class，然后遍历到最近的表和find((，并将该值用作显示的表的class选择器

$(function() {
$('select.CompanyMobilephone').change(function() {
$(this).closest('table').find('.CompanyMobilephoneDIV')
.hide().filter('.' + this.value).show();
});
});

.form_response_warning {
float: center !important;
vertical-align: top;
text-align: center !important;
background-color: #ffc107;
width: 100%;
color: black;
padding: 4px;
font-size: 14px;
font-family: Helvetica;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}
.form_response_info {
float: center !important;
vertical-align: top;
text-align: center !important;
background-color: #17a2b8;
color: white;
padding: 4px;
font-size: 14px;
font-family: Helvetica;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
<tr>
<td>
<table>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
</tr>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
</tr>
</table>
<form name="CompanyMobilephone1" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
<select class="custom-select CompanyMobilephone" name="CompanyMobilephone" >
<option selected>Choose...</option>
<option value="yes" class="CompanyMobilephoneYES">Yes</option>
<option value="no" class="CompanyMobilephoneNO">No</option>
</select>
</td>
</tr>
</table>
<table>
<tr>
<td>
<table>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
</tr>
<tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
<td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
</tr>
</table>
<form name="CompanyMobilephone2" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
<select class="custom-select CompanyMobilephone" name="CompanyMobilephone" >
<option selected>Choose...</option>
<option value="yes" class="CompanyMobilephoneYES">Yes</option>
<option value="no" class="CompanyMobilephoneNO">No</option>
</select>
</td>
</tr>
</table>

Answer 2

答案很简单-将closest((与find((结合使用。然而，为了易读性和可重用性，您应该真正考虑简化代码。

为您的响应表设置样式

<style>
.response-container tr {
border-collapse: collapse; 
border-bottom: 0px solid #FFFFFF; 
width: 100%;
}
.response-container tr td {
width: 100%; 
display:none;
text-align:center;
font-weight:bold;
}
</style>

该脚本具有我所指的closest()find()组合。closest(element)查找与element参数匹配的向上移动的最接近的容器元素。为了实现这一点，我给外部容器一个类名(set-container(，响应表得到类response-container

<script>
$(function() {
$('#CompanyMobilephone').change(function() {
var toFind = $(this).val() == "yes" ? ".form_response_info" : ".form_response_warning" ;
$(this).closest('.set-container').find('.response-container td').hide(); // hide them all
$(this).closest('.set-container').find(toFind).show(); // then just show the one you want
});
});
</script>

这是简化的HTML。无需ID

<table class='set-container'>
<tr>
<td>
<table class='response-container'>
<tr>
<td class="form_response_warning" colspan="2" >This is shown when NO has been chosen!</td>
</tr>
<tr>
<td class="form_response_info" colspan="2" >This is positive, you choose YES!</td>
</tr>        
</table>
<form action="update_userdata.asp" method="post">
<select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
<option selected>Choose...</option>
<option value="yes" >Yes</option>
<option value="no" >No</option>
</select>
</td>
</tr>
</table>