仅当元素在屏幕上时才运行Jquery代码

Question

我现在有一些非常重复的代码，一旦我解决了这个问题，我正在寻求重构。

我正在研究我的投资组合，它在每个部分使用相同的HTML设置 - 因为这是我想要的设计。 但是目前，当我点击more info ，JQuery代码不仅运行在视口中可见的部分，而且还运行在不可见的部分上。 问题是，如果我在第一部分中单击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/

Answer 2

jquery选择器$(".hiddenContent")触发html中与该类相关的所有元素，无论它在哪个容器中。您可以嵌套jquery选择器以使它们更具体。 例如： $("#one .hiddenContent")将选择具有类'hiddenContent'的所有元素，这些元素是id为'one'的元素的子元素

这在语法上非常相似，但与$("#one.hiddenContent") （注意缺少的空格）非常不同，它会选择所有同时具有id 1和类hiddenContent的元素

总结一下：在一个jquery选择器中嵌套两个或多个选择器将缩小选择层级（父级 - >子级）或者必须具有的质量。