Question

在第一段代码中，如果您点击LIKE，则会向活动部分添加一个班级.loved：.section .active。（全局页面插件会自动将.active类添加到可见部分。

在这里你可以看到INVIEW插件不起作用。

＆＃13;

$('#fullpage').fullpage({});

$(document).on("click", ".like", function() {
  $('.section.active').addClass("loved")
})

$('.loved').on('inview', function(event, isInView) {
  if (isInView) {
    console.log("IN VIEW")
  } else {
    console.log("GONE")
  }
});

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-size: 10vw;
  line-height: 1.2em;
}

.section {
  text-align: center;
  text-transform: uppercase;
  background: grey;
  color: #141414;
}

.like {
  color: red;
  position: fixed;
  cursor: pointer;
  top: .3em;
  right: .3em
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>
<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>
<div class=like>LIKE</div>

＆＃13;

在第二个函数中，如果我将类.loved添加到该部分，则INVIEW可以顺利运行。
有任何想法吗？

＆＃13;

$('#fullpage').fullpage({});

$('.loved').on('inview', function(event, isInView) {
  if (isInView) {
    console.log("IN VIEW")
  } else {
    console.log("GONE")
  }
});

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-size: 10vw;
  line-height: 1.2em;
}

.section {
  text-align: center;
  text-transform: uppercase;
  background: grey;
  color: #141414;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>
<div id="fullpage">
  <div class="section loved">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>

＆＃13;

Answer 1

你的问题就在这一行：

$('.loved').on('inview', function(event, isInView) {

因为在第一个片段中，您将“将来”添加该类，您需要将该事件委托给文档：

$(document).on('inview', '.loved', function(event, isInView) {

此外，在创建代码段时，如果您需要使用github lib，则需要转换自：

https://raw.githubusercontent.com/....

为：

https://rawgit.com/....

摘录：

$('#fullpage').fullpage({});

$(document).on("click", ".like", function() {
    $('.section.active').addClass("loved")
})

$(document).on('inview', '.loved', function(event, isInView) {
    if (isInView) {
        console.log("IN VIEW")
    } else {
        console.log("GONE")
    }
});

body {
  margin: 0;
  padding: 0;
  font-size: 10vw;
  line-height: 1.2em;
}

.section {
  text-align: center;
  text-transform: uppercase;
  background: grey;
  color: #141414;
}

.like {
  color: red;
  position: fixed;
  cursor: pointer;
  top: .3em;
  right: .3em
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.min.js"></script>
<script src="https://rawgit.com/protonet/jquery.inview/master/jquery.inview.min.js"></script>


<div id="fullpage">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section">Three</div>
    <div class="section">Four</div>
</div>
<div class=like>LIKE</div>

jQuery INVIEW不能与另一个函数

1 个答案: