Question

我正在编写一个将在应用程序的多个视图上执行的函数，并且每个视图最多可以包含50个相同元素的实例：'。。console'。每次视口滚动到每个实例时，我都需要能够执行一个动作。我有以下代码设置变量：

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function() {
    console.push($(this)[0].offsetTop);
  });

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

这些变量都可以正常工作，但是经过几个小时的jquery文档后，我无法想出if语句。以下是我对数组中第一项有效的方法：

  if (scroll == console[0]){
    $('.container').show();
  } else {
    $('.container').hide();
  }

但是，我希望它可以随时滚动位置与该数组中的每个值匹配，希望是这样的：

if (scroll == console[0-50])

以下是完整的块：

$(document).on('scroll', function(){

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function() {
    console.push($(this)[0].offsetTop);
  });

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

  //Anytime the scroll matches any of the instances of console, show a div
  if (scroll == console[0]){
    $('.container').show();
  } else {
    $('.container').hide();
  }
});

任何帮助将不胜感激。我对Javascript / JQuery很新，所以如果我完全以错误的方式解决问题，请告诉我。谢谢！

Answer 1

既然你说它适用于第一个，我猜这可行。

// cache the container     
var container = $('.container');

$(document).on('scroll', function(){

  //Determine the current pixel position of the scroll
  var scroll = $(document).scrollTop();

  //Create empty array with variable values, up to 50 
  var console = [];

  //Find each instance of ".console" and populate the array with its pixel position.
  $('.console').each(function(index) {
    console.push($(this)[0].offsetTop);
    if (scroll == console[index]){
      $(container).show();
    } else {
      $(container).hide();
    }
  });
});

Answer 2

要回答这个问题，你可以这样做：

var cons = $.map($('.console'), function(el) {
    return $(el).offset().top;
});

$(document).on('scroll', function(){
    var scroll = $(window).scrollTop();
    $('.container').toggle( $.inArray(scroll, cons) != -1 );
});

但是为一个范围创建一些东西，考虑到每个元素的高度，窗口的高度等都会涉及更多。

Answer 3

您可以查看Waypoints。它是一个jQuery插件，非常适合您要完成的任务。

我掀起了一个快速的jsFiddle来展示它的实际效果：http://jsfiddle.net/dmillz/4xqMb/

$(".console").waypoint(function(direction) {
    // Hide or show your ".container" object
});

更多Waypoint示例：http://imakewebthings.com/jquery-waypoints/#get-started

Answer 4

希望我理解你的问题，如下：

您有一堆.console类的元素，并且您希望它们在视口中出现。当这些元素不在视口中时，您希望它们消失吗？

由于你对这些.console类的对象何时在视口中感兴趣，我建议使用这个jQuery插件

http://plugins.jquery.com/appear/

https://github.com/morr/jquery.appear

我建议用另一个类包装容器中的每个.console对象，然后当这些容器出现和消失时显示并隐藏它们。

准备好文件时，请执行以下操作：

$(document).ready(function() {
   $('<.container-class>').appear();

   $('<.container-class>').on('appear', function() { $(this).find('.console').show(); });

   $('<.container-class>').on('disappear', function() { $(this).find('.console').hide(); });
});

Answer 5

虽然问题是通过另一个答案解决的，但是找出如何为数组中的每个值执行循环并没有真正解决......直到现在！

这可能是一种非常粗暴和臃肿的方式，但如果您基本上计算了数组中有多少项，那么您可以多次运行循环，为数组中的每个值添加索引。代码如下：

//Create empty array with variable values
var console = [];

//Find each instance of ".console" and populate the array with its pixel position.
$('.console').each(function() {
    console.push($(this)[0].offsetTop);
});

//Count the number of items in the array
var consoleIndex = console.length - 1;

    $(document).on('scroll', function(){

        //Determine the current pixel position of the scroll
        var scroll = $(document).scrollTop();

        //Anytime the scroll matches any of the instances of console, show a div
        for (var i = 0; i <= consoleIndex; i++) {
            if (scroll = console[i]) {
                $('.container').toggle();
            }
        } 
    });

JQuery If Statement使用数组中的每个值

5 个答案: