一个 JQuery 点击事件触发，一个没有

Question

我有一个内容编辑器页面，它在一个区域显示页面内容，在另一个区域显示一个编辑器。 我正在显示数据库中标记为“活动”的项目列表，并且我在编辑器中为每个项目提供了一个复选框，允许您激活/停用该项目，当您选中/取消选中该复选框时，列表项在显示区域应该出现/消失。 代码在 JQuery 中。

这些列表是在 PHP 中动态构建的，并且所有列表都有唯一的 ID，因为我在呈现时将记录 ID 附加到 ID 的末尾。 JQuery 点击事件都在寻找 class。 newsActive 片段正在工作。

我的问题是，当我选中/取消选中“活动”复选框时，classList div 项目没有出现/消失。 奇怪的是，两个片段的代码逻辑是相同的。 我复制/粘贴了 newsActive 代码片段并将其修改为 classActive 片段，更改了相应的 class 名称和 ID。

我一遍又一遍地检查了代码。 我没有任何重复的 ID，我的页面结构还可以。 我不知道为什么它不起作用。 任何人都可以帮忙吗？

更新：我在 jquery 顶部的点击事件中添加了一个警报。 首先，我听了 for.newsActive 并触发了警报。 接下来，我将其更改为 listen for.classActive 并且从未触发警报。 为什么？

$(".newsActive").click(function() {
  alert("newsactive");
  $('.newsActive').each(function() {
    var ItemId = this.id.match(/\d+/);
    if ($("#newsItemActive" + ItemId).is(":checked")) {
      $("#newsHdrDisplay" + ItemId).css("display", "block");
      $("#newsItemDisplay" + ItemId).css("display", "block");
    } else {
      $("#newsHdrDisplay" + ItemId).css("display", "none");
      $("#newsItemDisplay" + ItemId).css("display", "none");
    }
  });
});


$(".classActive").click(function() {
  alert("classactive");
  $('.classActive').each(function() {
    var ItemId = this.id.match(/\d+/);
    if ($("#classItemActive" + ItemId).is(":checked")) {
      $("#classname" + ItemId).css("display", "inline");
      $("#classdesc" + ItemId).css("display", "inline");
      $("#classlinefiller" + ItemId).css("display", "block");
    } else {
      $("#classname" + ItemId).css("display", "none");
      $("#classdesc" + ItemId).css("display", "none");
      $("#classlinefiller" + ItemId).css("display", "none");
    }
  });
});

<div id="newsList">
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay3' class='newsHdr'>OUR HOURS HAVE CHANGED!</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay3' class='col-12'>We have changed the studio hours for Monday through Thursday to 4:30 p.m. to 9:00 p.m.</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay15' class='newsHdr'>YOU CAN STILL REGISTER FOR CLASSES!</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay15' class='col-12'>Some classes are filling up quickly so it would be best to enroll early to ensure your spot in the class and night of your choice. Mail a Registration Form to our Mailing Address (2410 Allison Drive, JC, MO  65109), email us at grandancers@yahoo.com, bring it to the studio. Come join us for dance! Please call or email if you have a question.  Thanks!</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        <div class='row'>
            <div class='col-12'>
                <h6 id='newsHdrDisplay2' class='newsHdr'>2019-2020 FALL/SPRING SCHEDULE</h6>
            </div>
        </div>
        <div class='row'>
            <div id='newsItemDisplay2' class='col-12'>Download our class schedule so you won't miss a minute! You can find it on the Class Information page.</div>
        </div>
        <div class='row tm-20'></div>
        <div class='row tm-20'></div>
        </div>





    <div class="row" id="classList">
        <div class="col-12">
            <span class="subhead">Ballet</span><br/><br/>
            <div>
                <strong><span id='classname1'>Ballet 1:</span></strong>&nbsp;<span id='classdesc1'>ages 7-8 and must have completed Variety 2 or be at least 7 years old for a new student.</span>
            </div>
            <div id='classlinefiller1' class='row tm-20'></div>
            <div>
                <strong><span id='classname2'>Ballet 2, 3, 4, 5:</span></strong>&nbsp;<span id='classdesc2'>must be approved by teacher.</span>
            </div>
            <div id='classlinefiller2' class='row tm-20'></div>
            <div>
                <strong><span id='classname3'>Ballet  PrePointe:</span></strong>&nbsp;<span id='classdesc3'>Focusing on strength and flexibility of ankles, feet, and  toes.  Perfecting the basics.  Teacher approval required.</span>
            </div>
            <div id='classlinefiller3' class='row tm-20'></div><br/>
            
            <span class="subhead">Tap/Jazz</span><br/><br/>
            <div>
                <strong><span id='classname4'>Tap/Jazz 1:</span></strong>&nbsp;<span id='classdesc4'>ages 7 and up or must have completed Variety 2 or be at least 7 years old for a new student.</span>
            </div>
            <div id='classlinefiller4' class='row tm-20'></div>
            <div>
                <strong><span id='classname5'>Tap/Jazz 2:</span></strong>&nbsp;<span id='classdesc5'>must be approved by teacher.</span>
            </div>
            <div id='classlinefiller5' class='row tm-20'></div>
            <div>
                <strong><span id='classname6'>Teen Jazz:</span></strong>&nbsp;<span id='classdesc6'>ages 12 and up.</span>
            </div>
            <div id='classlinefiller6' class='row tm-20'></div>
            <div>
                <strong><span id='classname7'>Adult Tap:</span></strong>&nbsp;<span id='classdesc7'></span>
            </div><div id='classlinefiller7' class='row tm-20'></div>                       
        </div>
    </div>

Answer 1

尝试更改部分代码：

var ItemId = $(this).attr("id").match(/\d+/); //this.id.match(/\d+/);
if ($(this).is(":checked")) {
  //your current code here.
}