javascript - 使 Jquery 代码仅在元素在屏幕上时运行

Question

目前我有一些非常重复的代码，一旦我解决了这个问题，我希望重构这些代码。

我正在制作我的作品集，它在每个部分都使用相同的 HTML 设置 - 因为这就是我想要的设计。但目前，当我点击 more info 时，JQuery 代码不仅在视口(viewport)中可见的部分运行，而且还在不可见的部分运行。问题是，如果我在第一部分单击 more info，然后向下滚动到下一部分，我可以看到 JQuery 也在第二部分运行。

我知道我当前的代码是为执行此操作而设置的，但我如何改进它以便以后不会发生这种情况，如果可以的话，使代码重复性降低？

$.fn.slideFadeToggle = function() {
  return this.animate({
    opacity: 'toggle',
    height: 'toggle'
  }, 500);
};

$.fn.slideToggle = function() {
  if ($("#one, #two, #three").attr("trigger") === "0") {
    return this.delay(200).animate({
      height: 'toggle'
    }, 200);
  } else {
    return this.animate({
      height: 'toggle'
    }, 200);
  }
};

$.fn.imageSlideToggle = function() {
  if ($("#one, #two, #three").attr("trigger") === "1") {
    return this.animate({
      height: 'toggle'
    }, 200);
  } else {
    return this.delay(200).animate({
      height: 'toggle'
    }, 200);
  }
};

$(document).ready(function() {
  $("#one-more").click(function() {
    if ($("#one").attr("trigger") === "0") {
      $(".image").imageSlideToggle();
      $(".hiddencontent").slideToggle();
      $("#one-more").html("Close");
      $("#one").attr("trigger", "1");
    } else {
      $(".hiddencontent").slideToggle();
      $(".image").imageSlideToggle();
      $("#one-more").html("More Info");
      $("#one").attr("trigger", "0");
    }
  });

  $("#two-more").click(function() {
    if ($("#two").attr("trigger") === "0") {
      $(".image").imageSlideToggle();
      $(".hiddencontent").slideToggle();
      $("#two-more").html("Close");
      $("#two").attr("trigger", "1");
    } else {
      $(".hiddencontent").slideToggle();
      $(".image").imageSlideToggle();
      $("#two-more").html("More Info");
      $("#two").attr("trigger", "0");
    }
  });

  $("#three-more").click(function() {
    if ($("#three").attr("trigger") === "0") {
      $(".image").imageSlideToggle();
      $(".hiddencontent").slideToggle();
      $("#three-more").html("Close");
      $("#three").attr("trigger", "1");
    } else {
      $(".hiddencontent").slideToggle();
      $(".image").imageSlideToggle();
      $("#three-more").html("More Info");
      $("#three").attr("trigger", "0");
    }
  });
});

.container {
  height: 100vh;
  padding: 25px 45px 0 45px;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.top {
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

.header {
  font-family: Chivo;
}

.vertical-center {
  margin: 0 auto;
  position: absolute;
  top: 47%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.image {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  background-attachment: fixed;
  height: auto;
  width: 80%;
  max-width: 100%;
  max-height: 75%;
}

.image:hover {
  cursor: pointer;
}

.hiddencontent {
  position: absolute;
  font-family: Lato;
  display: none;
  width: 70%;
}

.moreinfo {
  z-index: 10;
}

.moreinfo:hover {
  cursor: pointer;
}

#one {
  background-color: jetblue;
  position: sticky;
  top: 0;
  z-index: 2;
}

#two {
  background-color: steelblue;
  position: sticky;
  top: 0;
  z-index: 3;
}

#three {
  background-color: ivory;
  position: sticky;
  top: 0;
  z-index: 4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
</head>
<link href="https://fonts.googleapis.com/css?family=Chivo|Lato:300,800,900|Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div id="one" class="container" trigger="0">
  <div class="contentcontainer">
    <div class="top header">
      <h3>Test</h3>
      <h3>Test</h3>
    </div>
    <div class="maincontentcontainer">
      <img class="image vertical-center" src="https://www.perfectdailygrind.com/wp-content/uploads/2018/07/Blending-specialty-coffee.jpg">
      <div class="hiddencontent vertical-center">
        <p>Etiam at neque justo. Integer id blandit nunc. Quisque semper feugiat sagittis. Cras pulvinar, justo ac posuere dapibus, neque erat finibus purus, in dapibus nisl ligula id magna. Vestibulum et scelerisque risus. Cras sed mi dictum, ultricies
          metus et, dignissim massa. Duis sed venenatis orci. Cras eleifend metus vitae sapien vehicula, ut sodales odio euismod. Proin porta consequat diam fringilla posuere. Phasellus nibh lectus, varius sit amet euismod ut, cursus a dui. Quisque vel
          lacus sit amet massa imperdiet laoreet eu in nibh.</p>
      </div>
    </div>
    <div class="bottom header">
      <h3 id="one-more" class="moreinfo">More Info</h3>
    </div>
  </div>
</div>

<div class="container" id="two" trigger="0">
  <div class="contentcontainer">
    <div class="top header white">
      <h3>Test</h3>
      <h3>Test</h3>
    </div>
    <div class="maincontentcontainer">
      <img class="image vertical-center" src="https://cdn.shopify.com/s/files/1/1183/8374/files/nathan-dumlao-325446_2048x2048.jpg?v=1506339381">
      <div class="hiddencontent vertical-center white">
        <p>Etiam at neque justo. Integer id blandit nunc. Quisque semper feugiat sagittis. Cras pulvinar, justo ac posuere dapibus, neque erat finibus purus, in dapibus nisl ligula id magna. Vestibulum et scelerisque risus. Cras sed mi dictum, ultricies
          metus et, dignissim massa. Duis sed venenatis orci. Cras eleifend metus vitae sapien vehicula, ut sodales odio euismod. Proin porta consequat diam fringilla posuere. Phasellus nibh lectus, varius sit amet euismod ut, cursus a dui. Quisque vel
          lacus sit amet massa imperdiet laoreet eu in nibh.</p>
      </div>
    </div>
    <div class="bottom header white">
      <h3 id="two-more" class="moreinfo">More Info</h3>
    </div>
  </div>
</div>

<div class="container" id="three" trigger="0">
  <div class="contentcontainer">
    <div class="top header">
      <h3>Test</h3>
      <h3>Test</h3>
    </div>
    <div class="maincontentcontainer">
      <div class="maincontentcontainer">
        <img class="image vertical-center" src="https://www.perfectdailygrind.com/wp-content/uploads/2018/07/cappuccino-2.jpg">
        <div class="hiddencontent vertical-center">
          <p>Etiam at neque justo. Integer id blandit nunc. Quisque semper feugiat sagittis. Cras pulvinar, justo ac posuere dapibus, neque erat finibus purus, in dapibus nisl ligula id magna. Vestibulum et scelerisque risus. Cras sed mi dictum, ultricies
            metus et, dignissim massa. Duis sed venenatis orci. Cras eleifend metus vitae sapien vehicula, ut sodales odio euismod. Proin porta consequat diam fringilla posuere. Phasellus nibh lectus, varius sit amet euismod ut, cursus a dui. Quisque
            vel lacus sit amet massa imperdiet laoreet eu in nibh.</p>
        </div>
      </div>
    </div>
    <div class="bottom header">
      <h3 id="three-more" class="moreinfo">More Info</h3>
    </div>
  </div>
</div>

Answer 1

您的代码的问题是您正在使用类 .hiddenClass 来打开和关闭文本。请参阅带有 $(".hiddencontent").slideToggle(); 的行 如果您只想触发单个元素，那么您应该为每个部分使用 id，或者您应该获取被单击的特定目标。当一个类被切换时，每个具有该类的元素都会被切换。

如果您希望您的代码不那么冗长，那么您应该为每个更多信息按钮创建一个类，然后检测该类。然后，当该类检测到点击时，您应该根据触发事件的目标进行切换。查看 .click 的文档，它触发代码中的切换:https://api.jquery.com/click/