jquery - 单击另一个元素时使用 .this 来切换类

问题描述

我正在尝试做这种效果很好的翻转事情，但由于某种原因，一条动画（.info不会添加info-up类）不会触发。它要么适用于屏幕上类的每次迭代，要么当我使用它时，它不能单独工作。

$(".full-bio").hide();

$(".inner-2").each(function(){
  $(this).hover(function(){
    $(".info",this).toggleClass("info-up");
    $(this).toggleClass("move-up");
    $(".full-bio", this).fadeToggle(1000);
  });
});

body {
  background-color: #999;
}

#jar {
  width:300px;
  height:500px;
  position: relative;
  overflow: hidden;
}

.blue {
  width: 100%;
  height: 100%;
  background-image: url("https://cdn2.hubspot.net/hubfs/2984366/V3_kiip_December2017/Images/icon-flame.svg?t=1532539767047");
  background-position: 100% center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: absolute;
}

.info {
  width: 100%;
  height: 30%;
  background-color: white;
  border-top: 8px solid transparent;
  -moz-border-image: -moz-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
  -webkit-border-image: -webkit-linear-gradient( 0deg, rgb(5,210,220) 0%, rgb(0,92,198) 100%);
  border-image: linear-gradient(to right, #05d2dc 0%, #005cc6 100%);
  border-image-slice: 1;
  position: absolute;
  bottom: 0;
  transform: skewY(-6deg);
  transform-origin: top left;
  transition: all 1s;
}

.info-up {
  height: 99%;
  transform: none;
  transform-origin: top left;
}

.inner {
  width: 100%;
  height:30%;
  background-color: white;
  position: absolute;
  bottom: 0;
}

.inner-2 {
  width: auto;
  height:100%;
  background-color: transparent;
  position: absolute;
  bottom: -77%;
  transition: all 1s;
  padding: 1em;
}

.move-up {
  transform: translateY(-70%);
}

.full-bio {
  padding:1em;
}

<html>
  <head>
    <script
      src="http://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>    
  </head>
  <body>
    <div id="jar">
      <div class="blue">IMG</div>
      <div class="info">&nbsp;</div>
      <div class="inner">&nbsp;</div>
      <div class="inner-2">
          <h2>Header</h2>
          <h3>Sub Title</h3>
            <p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
      </div>
    </div>
    
    <div id="jar">
      <div class="blue">IMG</div>
      <div class="info">&nbsp;</div>
      <div class="inner">&nbsp;</div>
      <div class="inner-2">
          <h2>Header</h2>
          <h3>Sub Title</h3>
            <p class="full-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus, dui ut auctor ultricies, mauris tellus hendrerit urna, sit amet eleifend tellus lectus et lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce a diam ut tortor rhoncus semper. Cras ultrices sollicitudin ornare. Integer et dui sed lacus convallis suscipit.</p>
      </div>
    </div>
  </body>
</html>

我究竟做错了什么？

标签： jquerythis

@Jason 的答案应该有效，但我只想指出您实际上并不需要.each循环，如果您省略它，您的代码会更好地工作：

$('.inner-2').hover(function(){ //this sets an event listener for the "hover" event for all 
                                //elements with a class="inner-2"

    $(this).siblings(".info").toggleClass("info-up");
    $(this).toggleClass("move-up");
    $(".full-bio", this).fadeToggle(1000);
});

您只需要在.each更改元素而不使用事件侦听器（鼠标单击、悬停等）时使用，或者如果您需要在事件侦听器在不同元素上触发时触发循环。

例如，假设您想class="foo"在用户按下带有的按钮时隐藏所有元素id="bar"：

$('#bar').on('click', function() { // when button is pressed

  $('.foo').each(function() {
    $(this).hide(); //hide all elements with class="foo"
  });

希望这可以帮助！});

jquery - 单击另一个元素时使用 .this 来切换类

问题描述

解决方案

推荐阅读