使用 jQuery 选择多个 ID 时遇到问题

Question

我希望能够通过单击 #profile 容器或 #profile 关闭来关闭弹出窗口。出于某种原因，我无法通过组合 ID 或单独编写每个 ID 来将两者应用于此函数。如果我注释掉 #profile 容器，#profile 关闭有效，否则只有 #profile 容器有效。我还尝试将两个 ID 组合在一个命令中，但同样只有 #profile 容器。

分别：

$("#profile-close").click(function() {
$(this).toggleClass('on');
$("#profile-container").toggleClass("active");
$(".wrapper").toggleClass("bg-blur");
});
$("#profile-container").click(function() {
$(this).toggleClass('on');
$("#profile-container").toggleClass("active");
$(".wrapper").toggleClass("bg-blur");
});

两者一起：

$("#profile-container, #profile-close").each(function(){ 
$(this).click(function() {
$(this).toggleClass('on');
$("#profile-container").toggleClass("active");
$(".wrapper").toggleClass("bg-blur")             
}); 
});

<div id="profile-container">
<div id="profile">
<div id="profile-close">close</div>
<div class="row">
<div class="col-md-4 col-sm-3"></div>
<div class="col-md-4 col-sm-6 mt-4">
<div id="profile-image">
<img src="./media/team-one.jpg" alt="">
</div>
<div class="mt-2">
<div id="profile-name">Stanley</div>
<div id="profile-title">Founder & CEO</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 mt-4">
<div id="profile-data">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate consequatur fuga fugiat dolore doloribus quasi ducimus ea aperiam minima illum!
</div>
</div>
</div>
</div>
</div>

#profile-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 700px;
width: 900px;
background: var(--bg-dark);
visibility: hidden;
opacity: 0;
z-index: -1;
padding-top: 50px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
transition: 0.7s;
}
#profile-close {
color: var(--nav-text);
position: fixed;
top: 0;
right: 0;
margin-right: 30px;
cursor: pointer;
transition: 0.5s;
}
#profile-container.active {
visibility: visible;
opacity: 0.95;
z-index: 3;
}
.wrapper {
transition: 0.7s;
}
.bg-blur {
filter: blur(10px);
opacity: 0.5;
}

Answer 1

根本不需要多个选择器。如果有人单击关闭按钮，事件将传播到配置文件容器，该容器将触发事件处理程序。

此代码应该有效：

$("#profile-container").click(function() {
// $('   ?   ').toggleClass('on');
// (The "on" class is not described. I don't know how it should work.)
$("#profile-container").toggleClass("active");
$(".wrapper").toggleClass("bg-blur");
});

在下面的代码片段中尝试一下。

$("#profile-container").click(function() {
// $("#profile-container").toggleClass('on');
$("#profile-container").toggleClass("active");
$(".wrapper").toggleClass("bg-blur");
});

#profile-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 150px;
width: 400px;
background: black;
visibility: hidden;
opacity: 0;
z-index: -1;
padding-top: 50px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
transition: 0.7s;
color: white;
}
#profile-close {
color: white;
position: fixed;
top: 0;
right: 0;
margin-right: 30px;
cursor: pointer;
transition: 0.5s;
}
#profile-container.active {
visibility: visible;
opacity: 0.95;
z-index: 3;
}
.wrapper {
transition: 0.7s;
}
.bg-blur {
filter: blur(10px);
opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="profile-container" class="active">
<div id="profile">
<div id="profile-close">close</div>
<div class="row">
<div class="col-md-4 col-sm-3"></div>
<div class="col-md-4 col-sm-6 mt-4">
<div id="profile-image">
<img src="./media/team-one.jpg" alt="">
</div>
<div class="mt-2">
<div id="profile-name">Stanley</div>
<div id="profile-title">Founder &amp; CEO</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 mt-4">
<div id="profile-data">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate consequatur fuga fugiat dolore doloribus quasi ducimus ea aperiam minima illum!
</div>
</div>
</div>
</div>
</div>

Answer 2

您可以使用多个 ID。但你也必须使用

$(this).toggleClass("active");而不是$("#profile-container").toggleClass("active");

因为你正在切换类。 所以你的代码只是切换类#profile-container而不是#profile-close所以你需要使用$(this)

试试吧，可能会对你有所帮助。

$(document).on('click','#profile-container,#profile-close',function() {
$(this).toggleClass('on');
$(this).toggleClass("active");
$(".wrapper").toggleClass("bg-blur");
});

#profile-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 300px;
width: 200px;
background: var(--bg-dark);
visibility: hidden;
opacity: 0;
z-index: -1;
padding-top: 50px;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.6);
transition: 0.7s;
background: red;

}
#profile-close {
color: var(--nav-text);
position: fixed;
top: 0;
right: 0;
margin-right: 30px;
cursor: pointer;
transition: 0.5s;
z-index: -1;
}
#profile-container.active {
visibility: visible;
opacity: 0.95;
z-index: 3;
}
.wrapper {
transition: 0.7s;
}
.bg-blur {
filter: blur(10px);
opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="profile-container" class="active">
<div id="profile">
<div id="profile-close">close</div>
<div class="row">
<div class="col-md-4 col-sm-3"></div>
<div class="col-md-4 col-sm-6 mt-4">
<div id="profile-image">
<img src="./media/team-one.jpg" alt="">
</div>
<div class="mt-2">
<div id="profile-name">Stanley</div>
<div id="profile-title">Founder & CEO</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 mt-4">
<div id="profile-data">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate consequatur fuga fugiat dolore doloribus quasi ducimus ea aperiam minima illum!
</div>
</div>
</div>
</div>
</div>