如何使此jquery代碼減少冗余並提高效率？

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);

但實際上，我會用'.category'替換'#commercials,#photography,#experiments' '.category' ; JSFiddle使用.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小提琴

$(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);