Question

我写javascript相对较新。下面的js代码是根据我在此处找到的上一个答案修改的。它完全符合我希望它在功能上做的事情，但是，每次鼠标进入时它都是冗余的并且调用代码（这需要的资源也比它需要的多）。

有关如何减少冗余和提高效率的任何建议吗？

在此简化演示： http://jsfiddle.net/nsnzd9cL/

HTML：

<div class="container">
    <div class="category" id="commercials">
        <p>Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />
        </p>
        <div class="scroll">
            <p>Scroll</p>
        </div>
    </div>
    <div class="category" id="photography">
        <p>Something
            <br />Something
            <br />
        </p>
        <div class="scroll">
            <p>Scroll</p>
        </div>
    </div>
    <div class="category" id="experiments">
        <p>Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />Something
            <br />
        </p>
        <div class="scroll">
            <p>Scroll</p>
        </div>
    </div>
</div>

JS：

  var arrow1 = $('#commercials .scroll');
var arrow2 = $('#photography .scroll');
var arrow3 = $('#experiments .scroll');

$("#commercials").mouseenter(function () {

    if ($('#commercials').hasScrollBar()) {
        arrow1.css({
            'visibility': 'visible'
        });
    } else {
        arrow1.css({
            'visibility': 'hidden'
        });
    }
});

$("#photography").mouseenter(function () {

    if ($('#photography').hasScrollBar()) {
        arrow2.css({
            'visibility': 'visible'
        });
    } else {
        arrow2.css({
            'visibility': 'hidden'
        });
    }
});

$("#experiments").mouseenter(function () {

    if ($('#experiments').hasScrollBar()) {
        arrow3.css({
            'visibility': 'visible'
        });
    } else {
        arrow3.css({
            'visibility': 'hidden'
        });
    }
});

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

Answer 1

JSFiddle

将事件绑定到容器并将其应用于容器中的元素，在本例中为指定的ID。然后在触发时查找与目标相关的元素：

$('.container').on('mouseenter','#commercials,#photography,#experiments', function(){
    var $this   = $(this),
        $scroll = $this.find('.scroll');

    if( $this.hasScrollBar() ){
        $scroll.css('visibility','visible');
    } else {
        $scroll.css('visibility','hidden');
    }   
});

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

但实际上，我会将'#commercials,#photography,#experiments'替换为'.category'; JSFiddle using .category。

使用.category为您提供动态添加新类别的额外好处，而不必在页面加载后创建事件时重新绑定事件，因为事件仍在容器上。

Answer 2

我已经减少了所有可以找到的冗余：

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }

    var $commercials = $( "#commercials" ),
        $photography = $( "#photography" ),
        $experiments = $( "#experiments" );

    var mouseEnterListner = function() {
        var arrow = $(this).find( '.scroll' );

        if ( $(this).hasScrollBar() ) {
            arrow.css({
                'visibility': 'visible'
            });
        } else {
            arrow.css({
                'visibility': 'hidden'
            });
        };
    };

    $commercials.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });

    $photography.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });

    $experiments.on('mouseenter', function() {
        mouseEnterListner.call(this);
    });
})(jQuery);

祝你好运，玩得开心！

Answer 3

我就是这样做的......

JS Fiddle

$(document).ready(function(){
    scrollCheck();
});

function scrollCheck() {
    var div = '',
        scroll = true;
    $('.category').each(function( index ) {
        div = $(this);
        scroll = div.get(0).scrollHeight <= (div.height() + 1);
        console.log(scroll); // just a check
        if (scroll) {
            div.children('.scroll').remove();
        }
    });
}

Answer 4

易于阅读和非冗余代码：

var arrow1 = $('#commercials .scroll');
var arrow2 = $('#photography .scroll');
var arrow3 = $('#experiments .scroll');

function bindMouseEnter(id, arrow){

   $("#"+id).mouseenter(function () {

       if ($('#'+id).hasScrollBar()) {
          arrow.css({
            'visibility': 'visible'
          });
      } else {
        arrow.css({
            'visibility': 'hidden'
        });
      }
    });

}

bindMouseEnter('commercials', arrow1);
bindMouseEnter('photography', arrow2);
bindMouseEnter('experiments', arrow3);


(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }
})(jQuery);

Answer 5

继续Vijay的回答，我们可以组合选择器：

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > (this.height() + 1);
    }

    $("#commercials,#photography,#experiments").on('mouseenter', function() {
        var arrow = $(this).find('.scroll');

        if ( $(this).hasScrollBar() ) {
            arrow.css({
                'visibility': 'visible'
            });
        } else {
            arrow.css({
                'visibility': 'hidden'
            });
        };
    };
})(jQuery);

如何使这个jquery代码更少冗余和更高效？

5 个答案:

JSFiddle