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

Question

我希望能够通过单击＃profile-container或＃profile-close来关闭弹出窗口。由于某种原因，我无法通过组合ID或单独编写每个ID来将其应用于此功能。如果我注释掉＃profile-container，则＃profile-close起作用，否则只有＃profile-container起作用。我还尝试将两个ID组合在一个命令中，但又只组合了＃profile-container。

分别：

$("#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

尝试使用.add包含#profile-close。

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

Answer 3

您可以使用多个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>