Javascript jQuery一次触发所有模式窗口，即使目标id不同

这很简单，我知道！！但是我不明白为什么所有不同的模态窗口都被同时调用，即使每个导航链接都是唯一的id链接

HTML-NAV

<div id="main" class="faded-in">
    <h3>
        <a class="js-modal" href="#about">ABOUT</a> &bull; 
        <a class="js-modal" href="#music">MUSIC</a> &bull; 
        <a class="js-modal" href="#live">LIVE</a> &bull;
    </h3>
</div><!-- end of #main -->

通过使用此选择器

$("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")

您告诉jquery对所有使用

class=“modal”

的元素执行

.toggleClass

方法，并且由于有多个这样的元素，所以所有模式窗口都会同时打开

假设

ABOUT

链接

href=“#ABOUT”

打开

#ABOUT

模式窗口，

MUSIC

链接

href=“#MUSIC”

打开

#MUSIC

模式窗口，而

LIVE

链接

href=“#LIVE”

打开

#LIVE

模式窗口，您可以替换这部分代码

$(".js-modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
})

用这个

$(".js-modal").click(function() {
    $($(this).attr("href")).toggleClass("faded-in").toggleClass("faded-out")
})

$(".modal").click(function() {
    $(this).toggleClass("faded-in").toggleClass("faded-out")
});

若要在单击时关闭模式，请替换此

$(".modal").click(function() {
    $("header, #main, .modal").toggleClass("faded-in").toggleClass("faded-out")
});

用这个

$(".js-modal").click(function() {
    $($(this).attr("href")).toggleClass("faded-in").toggleClass("faded-out")
})

$(".modal").click(function() {
    $(this).toggleClass("faded-in").toggleClass("faded-out")
});

---

你的JS怎么了？看起来单击处理程序正在函数调用中用作参数。你能发布完整的代码片段吗？我已经更新了JS代码片段，我承认我入侵了其他人的原始版本（通常期限很紧），如果有很多其他jQuery用于其他操作的话。你认为这是一个初始的框架构建吗？是只有三个

js modal

元素还是动态的

js modal

元素？@ekad只有三个js modal元素-从一个开始，但我添加了另外两个（每个元素作为单独的页面覆盖）真棒，解决了一半，感谢加载@ekad，它现在会打开相应的窗口，但不会在单击时关闭。真的需要学习更多jQuery。谢谢。看到更新的答案，我想点击就会关闭模式。你@ekad是f**kin超级明星！！！！非常感谢。我刚从周六晚上回来：-）