使用复选框显示/隐藏动态 div 不起作用

Question

我有一个网页，它使用 javascript 和 ajaxpage 在另一个页面中加载一个页面，而无需刷新。代码如下所示：

<a href="javascript:ajaxpage('r/gd.php','releases');">LINK</a>

单击 LINK 会将“r/gd.php”加载到我标记为“发布”的 DIV 中。我从这个网站获得了代码的主干：

http://dynamicdrive.com/dynamicindex17/ajaxcontent.htm

这一切都很好，直到我尝试使用复选框来过滤加载页面上的 DIV 内容。我想做的是有一系列具有唯一 ID 的复选框，如下所示：

<input type="checkbox" id="all"> Show All
<input type="checkbox" id="red"> Red
<input type="checkbox" id="orange"> Orange
<input type="checkbox" id="yellow"> Yellow

这些将在选中/取消选中时显示/隐藏各种 DIV，其中包含一系列如下类：

<div id="box" class="all red"><?php echo $gdclock; ?></div>
<div id="box" class="all red orange"><?php echo $gdheart; ?></div>
<div id="box" class="all orange"><?php echo $gdblue; ?></div>
<div id="box" class="all red orange yellow"><?php echo $gdwhite; ?></div>
<div id="box" class="all yellow"><?php echo $gdclearsplat; ?></div>
<div id="box" class="all red yellow"><?php echo $gdredblack; ?></div>

我不确定如何在以我这样做的方式加载的页面上完成此操作。我使用了诸如 this 和 this 之类的示例，它们在访问 URL 时效果很好，但是一旦我在动态加载的页面上使用相同的代码，它什么也不做。

我在这里缺少什么吗？这是link to my webpage（最好在桌面上查看）。如果您单击左侧栏中的所有专辑，则会加载一个充满黑胶唱片的页面，顶部带有复选框。我想根据颜色进行过滤（使用如上所述的类/ID）并隐藏其他所有内容。一次激活多个复选框是理想的。

Answer 1

您最初的问题似乎没有显示 Ajax 调用和有选择地打开/关闭 Html 元素之间的链接。这就是你要找的吗？

$(document).ready(() => {
  $("#all div").hide();
  $("p#checkboxes > :checkbox").change(() => {
    $("#all div").hide();
    if ($("#all").is(":checked")) $("#all div").show();
    else {
      if ($("#red").is(":checked")) $(".red").show();
      if ($("#orange").is(":checked")) $(".orange").show();
      if ($("#yellow").is(":checked")) $(".yellow").show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<p id="checkboxes">
  <input type="checkbox" id="all"> Show All
  <input type="checkbox" id="red"> Red
  <input type="checkbox" id="orange"> Orange
  <input type="checkbox" id="yellow"> Yellow
</p>

<div id="all">
  <div class="red">Only red stuff</div>
  <div class="red orange">red & orange stuff</div>
  <div class="orange">Only orange stuff</div>
  <div class="red orange yellow">anything</div>
  <div class="yellow">Only yellow things</div>
  <div class="red yellow">Red & yellow</div>
</div>

如果以上不是您需要的，请在您的问题中提供更多详细信息。