Question

我被告知最好的学习方法Javascript就是玩它。但我确定我可以制作干衣机吗？

我有两个并排的固定div，可以独立滚动。（我想在滚动时在每个框的顶部显示滚动高度。

var leftBox = document.getElementById('left-box');

var rightBox = document.getElementById('right-box');

var leftBoxScrollTopContainer = document.getElementById('left-scroll-height');
var rightBoxScrollTopContainer = document.getElementById('right-scroll-height');

function showScrollTop() {
    leftBox.onscroll = function(){
        leftBoxScrollTopContainer.innerHTML = leftBox.scrollTop + "px"; 
    }
    rightBox.onscroll = function(){
        rightBoxScrollTopContainer.innerHTML = rightBox.scrollTop + "px";   
    }
};

showScrollTop();

Answer 1

嗯，使用函数没什么意义，因为你基本上将两个函数绑定在两个不同的事件上。

var leftBox = document.getElementById('left-box');
var rightBox = document.getElementById('right-box');
var leftBoxScrollTopContainer = document.getElementById('left-scroll-height');
var rightBoxScrollTopContainer = document.getElementById('right-scroll-height');

leftBox.onscroll = function() {
    leftBoxScrollTopContainer.innerHTML = leftBox.scrollTop + "px";
}

rightBox.onscroll = function() {
    rightBoxScrollTopContainer.innerHTML = rightBox.scrollTop + "px";
}

我无法真正看到这样做更清洁，更干燥的方法。即使使用jQuery，您也可以使用相同数量的代码。或者更少。

Answer 2

也许是这样的：

function showScrollTop(prefix){
    var box = document.getElementById(prefix + '-box');
    var container = document.getElementById(prefix + '-scroll-height');

    box.onscroll = function(){
        container.innerHTML = box.scrollTop + "px"; 
    }
}

showScrollTop("left");
showScrollTop("right");

或者通过将前缀作为array传递：

function showScrollTop(prefixes){
    for(var i = 0; i < prefixes.length; i++){
        (function(prefix){
            var box = document.getElementById(prefix + '-box');
            var container = document.getElementById(prefix + '-scroll-height');

            box.onscroll = function(){
                container.innerHTML = box.scrollTop + "px"; 
            }
        })(prefixes[i]);
    }
}

showScrollTop(["left", "right"]);

如何在函数中使用Javascript函数Dryer实现两个函数

2 个答案: