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

时间:2013-09-10 18:57:45

标签: javascript jquery arrays loops scroll

我正在编写一个将在应用程序的多个视图上执行的函数,并且每个视图最多可以包含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很新,所以如果我完全以错误的方式解决问题,请告诉我。谢谢!

5 个答案:

答案 0 :(得分:0)

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

// 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();
    }
  });
});

答案 1 :(得分:0)

要回答这个问题,你可以这样做:

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

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

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

答案 2 :(得分:0)

您可以查看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

答案 3 :(得分:0)

希望我理解你的问题,如下:

您有一堆.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(); });
});

答案 4 :(得分:0)

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

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

//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();
            }
        } 
    });