Jquery函数也应该与其他元素一起使用

时间:2014-06-25 15:04:44

标签: javascript jquery html css

我试图让这个功能多次工作:

  • 目前仅适用于h1标签
  • 我怎样才能让它适用于<div class="logo">?我不想重复这个功能,我需要一种方法让函数适用于各种元素。

演示:http://jsfiddle.net/33Ec8/4/

JS:

// Get the divs that should change
function displayThese() {
    var $heading = $('h1');
    var h1top = $heading.position().top;
    var h1bottom = h1top + $heading.height();
    var h1left = $heading.position().left;
    var h1right = h1top + $heading.width();

    var divs = $('li').filter(function () {
        var $e = $(this);
        var top = $e.position().top;
        var bottom = top + $e.height();
        var left = $e.position().left;
        var right = left + $e.width();

        return top > h1bottom || bottom < h1top || left > h1right || right < h1left;
    });
    return divs;
}

(function fadeInDiv() {
    var divs = displayThese();
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.animate({
            opacity: 1
        }, Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.animate({
            opacity: (Math.random() * 1)
        }, Math.floor(Math.random() * 1000), function () {
            window.setTimeout(fadeInDiv);
        });
    }

})();

$(window).resize(function () {
    // Get items that do not change    
    var divs = $('li').not(displayThese());
    divs.css({
        opacity: 0.3
    });
});

1 个答案:

答案 0 :(得分:1)

你的问题没有说得很清楚,所以我强烈建议你描述一下代码应该做什么与​​它做什么。

那就是说,这是半盲尝试回答我认为你想要的东西。

您可以将选择器作为参数传递给displayThese。

function displayThese(selectorString)
{
     var $elementsUnderWhichNothingShouldFade = $(selectorString);
     ...
}

然后当你调用displayThese时,你可以传入你喜欢的任何复杂的选择器。

var divsToChange = displayThese('h1, div.logo')

当然,您需要添加额外的逻辑来测试图像元素是否位于生成的$ elementsUnderWhichNothingShouldFade(这是元素列表)的任何下面。