Question

所以我在这里遇到了一个小问题。我有一个简单的jQuery函数，以查看给定的元素/元素是否在当前视口中。请参见下面的代码。

checkIfInViewport(element, {methods I want to use});

我的问题是我如何摆脱对addClass和css方法的硬编码，而改为调用以下函数：

var val = document.getElementById("id-goes-here").innerHTML;

因此，我不必指定要对函数本身中的元素执行的操作，我想将要执行的操作传递给函数。

谢谢！

Answer 1

您可以将逻辑提取到函数，并将其作为参数传递给函数。通常将其称为callback。

function checkIfInViewport(element, callback) {
  $(element).each(function() {
    let divPos = $(this).offset().top,
      topOfWindow = $(window).scrollTop();

    if (divPos < topOfWindow + 600) {
      callback(this);
    }
  });
}

function animateElementAndSetOpacity ( element ) {
  $(element)
    .addClass('animated bounceInLeft')
    .css('opacity', 1);
}

checkIfInViewport( someElement, animateElementAndSetOpacity );

Answer 2

我不确定我是否理解您的问题，但是如果您想将可配置的jquery属性传递给函数，则应该可以使用类似这样的方法：

 function checkIfInViewport(element, jqueryMethods, jqueryAttribute) {
    $(element).each(function() {
      let divPos = $(this).offset().top,
        topOfWindow = $(window).scrollTop();

        if (divPos < topOfWindow + 600) {
            for(var index in jqueryMethods) {
                var method = jqueryMethods[index];
                var attribute = jqueryAttribute[index];
                $(element)[method](attribute);
            }
        }
    });
}
checkIfInViewport(element, ['addClass', 'css'], ['animated bouceInLeft', {'opacity': '1'}]);

传递要在jQuery对象上使用的方法

2 个答案: