jquery - 如何让 jQuery 更改（函数（）以每个父级为目标并隐藏未选择的 div 对应值

Question

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

我尝试过使用 id´s, 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>

标签： jquery

Answer 1

答案很简单——将最接近的() 与 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。不需要身份证

<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>