使用 jQuery show() 显示隐藏的 div 不起作用 [重复]答案

【问题标题】：Show a hidden div using jQuery show() not working [duplicate]使用 jQuery show() 显示隐藏的 div 不起作用 [重复]
【发布时间】：2021-04-06 06:30:08
【问题描述】：

我在form 中有一个隐藏的div，名为recipeDetailsDiv，如下所示

$("#recipes").change(function() {
  var selectedVal = $("#recipes").val();
  if (selectedVal != "") {
    $("#recipeDetailsDiv").show();
  }
});

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="recipes">Recipes</label>
        <select class="form-control" id="recipes" name="recipes" required>
          <option></option>
          <option>1</option>
          <option>2</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
    <ul class="list-group list-group-flush">
      <div id="populateRecipeDetails">Recipe Details</div>
    </ul>
  </div>
</form>

当有人更改下拉框时，我试图显示隐藏的 div

我也加入了jQuery CDN。但它没有显示在下拉框的变化上。这可能是一个简单的问题。但我不知道如何解决。有人可以帮忙吗？

编辑 1

我在以下订单中包含以下代码

<?php include "commonFiles/assignModal.php"; ?>

<?php include "../commonFilesForAll/jsLibraries.php"; ?>

jsLibraries.php 包含 CDN。

assignModal.php 与我上面显示的HTML 代码相同

【问题讨论】：

对我来说很好。我猜是这个问题。 Why does jQuery or a DOM method such as getElementById not find the element?
@Phil 我尝试了提到的前两个选项。但不工作。仍在找出问题所在
请更新您的问题以显示您在 HTML 中包含 jQuery 和脚本的位置。对于阅读本文的其他人，请不要将两个代码 sn-ps 结合起来，因为这可能会隐藏问题
我显示它的顺序与我使用的顺序相同。首先是HTML，然后是CDN，然后是<script>标签
请更新您的问题。显示包含所有相关元素和 <script> 标记的 HTML 文档。你的<script> 标签在<head> 或<body> 部分吗？如果<body>，它们与您的<form> 相比在哪里？

标签： javascript jquery show hidden

【解决方案1】：

您的代码运行良好。所以作为@Phil's comment，你应该向我们展示副作用渲染代码。因为可能是这个问题：Event handler not working on dynamic content

此外，我建议增强您的逻辑代码。

有两种解决方法：

使用toggle处理case空选择。
如果选择的项目是空的，则使用show，否则使用hide

$("#recipes").change(function() {
  const isToggle = $("#recipes").val() !== "";
  $("#recipeDetailsDiv").toggle(isToggle);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="form-group">
    <div class="row">
      <div class="col-sm">
        <label for="recipes">Recipes</label>
        <select class="form-control" id="recipes" name="recipes" required>
          <option></option>
          <option >1</option>
          <option>2</option>
        </select>
      </div>
    </div>
  </div>

  <div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
    <ul class="list-group list-group-flush">
      <div id="populateRecipeDetails">Recipe Details</div>
    </ul>
  </div>
</form>

【讨论】：

value 属性对于 <option> 标记是可选的。如果省略，则取文本内容
更新了我的答案，请看一下@Phil ^^！
@NguyễnVănPhong 感谢您的努力。我会支持你的答案
这是我的荣幸。 @阿努
是的。我知道了。您应该根据我的建议和@Phil 仔细检查详细信息

【解决方案2】：

如果recipes是可选的并且选择了空选项，则只需要在选择选项时显示div。

$("#recipes").change(function() {
    $("#recipeDetailsDiv").show();
});

show问题，你可以为class重构它。创建一个隐藏 div 的类并使用 jQuery.removeClass()。

【讨论】：