2

jQueryを始めたばかりです。世界地図のさまざまな地域の背景を動的に変更するために、ここでいくつかの醜いコードになってしまいました。と に対して同じセレクターを 2 回作成していmouseoverますmouseout。(それが のhover動作です: 2 つを組み合わせる... はい?) これを行うためのよりクリーンな方法はありますか? つまり、一度ビルドするだけで両方に使用できるということですか?

$('.regionName').hover(  
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).css('background', 'url(images/world-map-' + id + '.png) no-repeat');
  },
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).css('background', 'none');
  }
);
4

3 に答える 3

1 
$('.regionName').on('mouseenter mouseleave', function(e) {
    var id = this.id.substring(0, 2);
    $("#" + id + "BG").css('background', e.type==='mouseenter'?'url(images/world-map-' + id + '.png) no-repeat':'none');
});

jQueryドキュメントから：

$(selector).hover(handlerIn, handlerOut) の呼び出しは、次の省略形です。

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

于 2012-07-27T18:56:06.027 に答える
0

そのメソッドの代わりに.css、カスタム クラスを作成して使用します.toggleClass()。次に、両方の関数を 1 つに結合できます。

$('.regionName').hover(  
  function() {
    var id = $(this).attr("id");
    id = (id.substring(0, 2));
    var region = "#" + id + "BG";
    $(region).toggleClass('addbg-'+id); // add on mouseover, remove on mouseout
  }
);

関連するすべてのクラスをスタイルシートに追加.addbg-<whatever>したら、準備完了です。

于 2012-07-27T18:55:07.457 に答える
0

コンパクトなコードを作成するよりも、読みやすさを優先します。

$('.regionName').hover(  
    function() {
        var id = $(this).attr("id");
        regionHelper(id);
});

//performs the toggle
function regionHelper(id){
     id = id.substring(0, 2);
     var region = "#" + id + "BG";
     var element = $('#' + id);
     if (element.css('background').length == 0){
        element.css('background', 'url(images/world-map-' + id + '.png) no-repeat');
     } else {
        element.css('background', '');
     }
}
于 2012-07-27T20:06:42.503 に答える