1

我在一个固定为 3 个元素的 Javascript 文件中有一些代码。

我现在从数据库中提取项目，因此我需要将其转换为循环以创建适量的元素。

我似乎无法弄清楚如何正确编写动态变量。

这是我最初拥有的：

var block0=$('#block0').offset().top;
var block1=$('#block1').offset().top;
var block2=$('#block2').offset().top;


$(window).scroll(function(){
windowScroll=$(window).scrollTop();

// conditional first item
if(windowScroll > block0){
    $('.arrow').show();
    $('.static_ele').hide(); 
    $('#block_1').show(); 
    $('#block_1').css({'position':'fixed','padding-top':0}); 
    $('.arrow a').removeClass('upward');
}else{
    $('.arrow a').attr('href','#block1'); 
}

// all central items
if(windowScroll > block1-200){
    $('.static_ele').hide(); 
    $('#block_2').show(); 
    $('#block_2').css('position','fixed');   
    $('.arrow a').attr('href','#block2'); 
    $('.arrow a').removeClass('upward');
}

// conditional last item
if(windowScroll > block2-200){
    $('.static_ele').hide();  
    $('#block_3').show(); 
    $('#block_3').css('position','fixed');  
    $('.arrow a').attr('href','#arrow1'); 
    $('.arrow a').addClass('upward');
}

})

这就是我现在必须要做的：

var i=1;
var len={{collection.products_count}};

$(window).scroll(function(){
windowScroll=$(window).scrollTop();

    // first block
    if(windowScroll > $('#block0').offset().top){ 
        $('.arrow').show();
        $('.static_ele').hide(); 
        $('#block_1').show(); 
        $('#block_1').css({'position':'fixed','padding-top':0}); 
        $('.arrow a').removeClass('upward');
    }else{
        $('.arrow a').attr('href','#block1'); 
    }

    // central blocks
    for (i; i<len-2; i++)
    {
        if(windowScroll > $('#block'+i).offset().top-200){
            $('.static_ele').hide(); 
            $('#block_'+(i+1)).show();  
            $('#block_'+(i+1)).css('position','fixed');   
            $('.arrow a').attr('href','#block'+(i+1)); 
            $('.arrow a').removeClass('upward');
        }
    } // end for loop

    // last block
    if(windowScroll > $('#block'+(len-1)).offset().top-200){ 
        $('.static_ele').hide();  
        $('#block_'+len).show(); 
        $('#block_'+len).css('position','fixed');  
        $('.arrow a').attr('href','#arrow1'); 
        $('.arrow a').addClass('upward');
    }


}) // end window scroll function

这仍然无法正常工作。如果我将项目从四个循环中取出并手动输入它们就可以了。因此，如果我将上面的 For 循环替换为

// central blocks
    if(windowScroll > $('#block1').offset().top-200){
        $('.static_ele').hide(); 
        $('#block_2').show();  
        $('#block_2').css('position','fixed');   
        $('.arrow a').attr('href','#block2'); 
        $('.arrow a').removeClass('upward');
    }

    if(windowScroll > $('#block2').offset().top-200){
        $('.static_ele').hide(); 
        $('#block_3').show();  
        $('#block_3').css('position','fixed');   
        $('.arrow a').attr('href','#block3'); 
        $('.arrow a').removeClass('upward');
    }

然后它非常适用于有 4 个项目的场景。所以我认为这是因为所有情况都需要从 windowScroll 函数中访问，而当它们包含在 for 循环中时它们不是？还有另一种编码方式吗？

（一点背景 - 这个脚本是在用户向下滚动页面时隐藏和显示 div。页面底部的箭头可用于单击下一张幻灯片。当您到达底部时，箭头会出现并带您回到顶部。）

4

2 回答 2

0

好吧，我只是尽力修复语法错误，而我没有得到你真正想做的事情。

var i=0,
    j=0,
    len={{collection.products_count}};// Why use {{collection.products_count}}, Is there some server side script?

$(window).scroll(function(){
windowScroll=$(window).scrollTop();

    for (i; i<len; i++)
    {

        // first block
        if(i == 0){
            if(windowScroll > block0){
                $('.arrow').show();
                $('.static_ele').hide(); 
                $('#block_1').show(); 
                $('#block_1').css({'position':'fixed','padding-top':0}); 
                $('.arrow a').removeClass('upward');
            }else{
                $('.arrow a').attr('href','#block1'); 
            }
        } else {

        // last block
        if(i == len-1){
            if(windowScroll > $('#block_'+(i-1)).offset().top-200){
                $('.static_ele').hide();  
                $('#block_'+i).show(); 
                $('#block_'+i).css('position','fixed');  
                $('.arrow a').attr('href','#arrow1'); 
                $('.arrow a').addClass('upward');
            }
        } else {

        // all other blocks

            if(windowScroll > $('#block_'+i).offset().top-200){
                $('.static_ele').hide(); 
                $('#block_'+(i+1)).show(); 
                $('#block_'+(i+1)).css('position','fixed');   
                $('.arrow a').attr('href','#block_'+(i+1)); 
                $('.arrow a').removeClass('upward');
            }

        } // end testing which blocks

    } // end for loop

}) // end window scroll function
于 2013-08-22T03:02:13.233 回答
0

您的代码中有多个问题。

首先，当您应该编写[i]的i只是. 创建一个大小为 1 的新数组；这个数组很快就被强制转换成一个字符串，很高兴在这种情况下与 i.toString() 相同；然后将该值连接到一个字符串。"block" + [i]"block" + i[i]

其次：您希望为所有块设置一个公共类，而不是使用 ID，以便您可以有效地选择它们。然后你想使用 JQuery each 来循环它们而不是 for。

第三 - 你的代码“设置块变量”只做一件事

for (j; j<len; j++)
{   
    // set block vars
    var tem=block[j];
    tem=$('#block'+[j]).offset().top;
}

相当于

j = len;
var tem = $('#block' + (len - 1)).offset().top;

这就是它的所有副作用——它没有设置任何“块变量”。

而不是else { if() { } }写else if () { }。

将所有“循环不变量”完全移出 for 循环（$('.static_ele').hide();例如，运行len时间而不是只有 1.

最后，不要使用仅包含 if 循环变量的 for 循环 - 将第一个 if 和 last if 移出循环，并将 for 循环修改为从倒数第二个运行，以避免可怕的“for-case”范例。

根据这些指南编写代码后，它会变得更加明显，并且实际上回答您的问题将成为可能

于 2013-08-22T03:11:16.027 回答