Javascript 我的JQuery removeClass和addClass无法工作

因此，我试图学习使用json、引导和jquery进行编码。当我用

removeClass（）

单击导航链接时，我试图删除所有活动类按钮，然后在用

addClass（）

单击导航链接中的某个按钮时，再次添加活动类，但它在我的代码中不起作用。这是我的密码：

HTML:

所有菜单

JS:

$.getJSON（'data/pizza.json'，函数（data）{
让menu=data.menu；
$（“#daftar菜单”）.empty（）；
//循环terhadap对象
$.each（菜单，（索引，数据）=>{//berikan tiap elemen pada menu sebuah fungsi
$（“#daftar菜单”）。附加(`
${data.nama}
${data.deskripsi}
${data.harga}
`);
});
});
//在这之前一切都很顺利
$（'.nav link'）。在（'click'，function（）上{
$（'.nav link'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

---

即使我用alert检查它，alert也不会起作用。我遗漏了什么吗？

请尝试下面的代码片段。这将设置要在nav链接上触发的事件，即使在代码执行之后也会添加该链接

$（文档）.on（'click'，'nav link'，function（）{
$（'.nav link'）.removeClass（'active'）；
$（this.addClass（'active'）；
});

我同意你的代码，一切都很好。removeClass和addClass的jQuery按照我的预期工作。（我将您的代码扔到WordPress页面上，只添加了`jQuery（document）.ready（函数（$）{/*code*/}）；您在console中是否显示任何错误？@JamesValeii哦，真的吗？因此，当我保存代码时，console和浏览器中都不会发生任何事情。因此，代码应使“所有菜单”在默认情况下处于活动状态，然后在按下其他按钮时处于非活动状态。我的“所有菜单”在我单击另一个按钮时仍然处于活动状态。当我写在点击事件下面。我从youtube上的教程中获得了代码，但从视频中获得的代码运行良好，但我的代码不行，我添加了HTML和.nav链接切换jQuery（在脚本标记和document.ready中）到WordPress内容区域。我可以单击不同的导航项，类“active”被删除，然后类“active”被添加到$this。@JamesValeii我真的不知道为什么我的代码不能工作loloh天哪，是的，它能工作。非常感谢

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" width="120"></a>
        <button class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">All Menu</a>
            <a class="nav-item nav-link" href="#">Pizza</a>
            <a class="nav-item nav-link" href="#">Pasta</a>
            <a class="nav-item nav-link" href="#">Nasi</a>
            <a class="nav-item nav-link" href="#">Minuman</a>
          </div>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row mt-3">
        <div class="col">
            <h1>All Menu</h1>
        </div>
    </div>
    
    <div class="row" id="daftar-menu">
        
    </div>
</div>

 $.getJSON('data/pizza.json', function(data) {
    let menu = data.menu;
    $('#daftar-menu').empty();
    //looping terhadap object 
    $.each(menu, (index, data) => {  //berikan tiap elemen pada menu sebuah fungsi
        $('#daftar-menu').append(`<div class="col-md-4">
            <div class="card mb-4">
                <img src="img/menu/${data.gambar}" class="card-img-top" alt="...">
                <div class="card-body">
                <h5 class="card-title">${data.nama}</h5>
                <p class="card-text">${data.deskripsi}</p>
                <h5 class="card-title">${data.harga}</h5>
                <a href="#" class="btn btn-primary">Pesan Sekarang</a>
                </div>
            </div>
        </div>`);
    });
});

//everything works fine until this point
$('.nav-link').on('click', function() {
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
});