Question

我在Javascript文件中有一些代码，修复了3个元素。

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

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

这就是我原来拥有的：

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。页面底部的箭头可用于点击下一张幻灯片。当你到达底部时箭头出现并带你回到顶部。）

Answer 1

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

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

Answer 2

您的代码中存在多个问题。

首先，您应该使用[i]代替i进行字符串连接"block" + [i]，而您应该写的只是"block" + i。 [i]创建一个大小为1的新数组;这个数组很快被强制转换成一个字符串，在这种情况下，它与i.toString（）很相似;然后将该值连接成一个字符串。

其次：您不想使用ID，而是要为所有块设置公共类，以便您可以有效地选择它们。然后你想使用JQuery循环遍历它们而不是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和last，并将for循环修改为从第二个到第二个，以避免可怕的“for-case”范例。

根据这些指导编写代码之后，它会更加明显地尝试做什么，并且实际上可以回答您的问题

将静态变量和相关类移动到循环中

2 个答案: