一緒に機能を結合する - クリーナーコード

Question

コードを短縮する方法はありますか？私はすべて同じことをする約15の機能を追加する必要があります。

$(document).ready(function() { 
    $('.map-highligh').maphilight({ 

    }); 

    //north roll over 
    $('#hilightlink').mouseover(function(e) { 
     $('#north').mouseover(); 
    }).mouseout(function(e) { 
     $('#north').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

    //Wellington roll over 
    $('#hilightlink-wel').mouseover(function(e) { 
     $('#wellington').mouseover(); 
    }).mouseout(function(e) { 
     $('#wellington').mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 

}); 

Answer 1

あなたはこの1のためにあなたのUIを再考することもできますが、あなたはこのような何か行うことができます：あなたは、HTMLコードに変更を加えることなく、この機能を使用することができます

function mouseBind(bound, affected) { 
    $('#' + bound) 
     .mouseover(function() { 
     $('#' + affected).mouseover(); 
     }) 
     .mouseout(function() { 
     $('#' + affected).mouseout(); 
     }) 
     .click(function (e) { e.preventDefault(); }) 
    ; 
} 

mouseBind('hilightlink', 'north'); 
mouseBind('hilightlink-wel', 'wellington'); 

Answer 2

：

function bind_block(button, element) { 
    button.mouseover(function(e) { 
    element.mouseover(); 
    }).mouseout(function(e) { 
    element.mouseout(); 
    }).click(function(e) { e.preventDefault(); }); 
} 

bind_block($('#hilightlink'), $('#north')); 
bind_block($('#hilightlink-wel'), $('#wellington')); 

を

このイベントを15種類の要素にバインドする必要がある場合は、CSSクラスを使用する方がよいでしょう。より多くの助けを得るためにあなたのHTMLを提供してください。

Answer 3

コードを整理するために少しの合成を使用することができます。

function makeTrigger(id, eventName) { 
    return function(e) { 
     $('#' + id).trigger(eventName); 
    }; 
} 

function prevent(e) { 
    e.preventDefault(); 
} 

$('#hilightlink') 
.mouseover(makeTrigger("north", "mouseover")) 
.mouseout(makeTrigger("north", "mouseout")) 
.click(prevent); 

Answer 4

$.fn.rollOver = function(selector) { 
    this.on('mouseover mouseout', function(e) { $(selector).trigger(e.type); }); 
    this.on('click', function(e) { e.preventDefault(); }); 
    return this; 
} 
$('#hilightlink').rollOver('#north'); 
$('#hilightlink-wel').rollOver('#wellington'); 

Answer 5

我々は利点にそれを使用するように悪用する可能性がどのようなDOMの関係を見なければ、私は、テーブル内のデータを入れたいとコードのコピーが1つだけですので、テーブルを反復し、あなたが追加することができます

var hoverItems = { 
    "highlightlink": "north", 
    "highlightlink-wel": "wellington" 
}; 

$("#" + Object.keys(hoverItems).join(", #")).hover(function() { 
    $("#" + hoverItems[this.id]).mouseover(); 
}, function() { 
    $("#" + hoverItems[this.id]).mouseout(); 
}).click(function(e) {e.preventDefault();}); 

：ルックアップテーブルを用いて、

var hoverItems = [ 
    "highlightlink", "north", 
    "highlightlink-wel", "wellington" 
]; 

for (var i = 0; i < hoverItems.length; i+= 2) { 
    (function(item$) { 
     $("#" + hoverItems[i]).hover(function() { 
      item$.mouseover(); 
     }, function() { 
      item$.mouseout(); 
     }).click(function(e) {e.preventDefault();}); 
    })($(hoverItems[i+1])); 
} 

あるいは、わずかに異なる方法：/実行中のコードを変更せずに識別子を変更/削除

この第2の方法は、Object.keys()方法の場合、ES5またはES5 shimを必要とします。

これらの方法のいずれかを使用して項目を追加するには、データテーブルに項目を追加するだけです。実行コードの新しい行を1つ書きません。