文章/答案/技术大牛

发布

社区首页 >问答首页 >只有当一个元素在屏幕上运行时，才使Jquery代码运行

问只有当一个元素在屏幕上运行时，才使Jquery代码运行
EN

Stack Overflow用户

提问于 2019-04-09 19:06:22

回答 2查看 70关注 0票数 0

我现在有一些相当重复的代码，一旦我解决了这个问题，我就想重构它。

我正在处理我的投资组合，它使用每个部分中相同的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>

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-09 19:18:09

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

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

票数 0

Stack Overflow用户

发布于 2019-04-09 19:18:54

jquery选择器$(".hiddenContent")将触发带有该类的html中的所有元素，而不管它在哪个容器中。您可以嵌套jquery选择器，使它们更加具体。例如：$("#one .hiddenContent")将选择所有具有类'hiddenContent‘的元素，这些元素是id 'one’的元素的子元素。

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

因此，总结一下:在一个jquery选择器中嵌套两个以上的或选择器将缩小选择的范围，要么是分层的(父->子)，要么是它必须具备的数量。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55599653

复制

相似问题

问只有当一个元素在屏幕上运行时，才使Jquery代码运行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有当一个元素在屏幕上运行时，才使Jquery代码运行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问只有当一个元素在屏幕上运行时，才使Jquery代码运行
EN