複数のjQueryをクリックして1つの関数にリファクタリングする

Question

1つの動的関数を作成する最良の方法は何ですか？

$("#litigation-click").click(function() { 
    $(".textbox-analysis").hide() 
    $("#litigation-box").fadeIn("slow",function() {}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 

$("#goingconcern-click").click(function(){ 
    $(".textbox-analysis").hide() 
    $("#goingconcern-box").fadeIn("slow",function(){}); 
    $("html, body").animate({scrollTop: $(document).height()},"slow"); 

    return false; 
}); 

$("#unquoted-click").click(function() { 
    $(".textbox-analysis").hide() 
    $("#unquoted-box").fadeIn("slow",function(){}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 

Answer 1

あなたは、あなたが複数のセレクタのためにカンマ区切りを使用することができ、ターゲット要素

$("#litigation-click, #unquoted-click, #goingconcern-click").click(function(event) { 
    $(".textbox-analysis").hide(); 
    var _getId = event.target.id; // will give target element 
    $("#"+_getId).fadeIn("slow",function() { 
    }); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 
    return false; 
}); 

Answer 2

を取得するためにjQuery Multiple Selector (“selector1, selector2, selectorN”) & eventオブジェクトを使用することができ、その後、分割が最初の部分を取得し、ボックスを生成するためにそれを使用するidをクリックid：

$("#unquoted-click, #goingconcern-click, #unquoted-click").click(function() { 
    $(".textbox-analysis").hide(); 

    $("#" + this.id.split('-')[0] + "-box").fadeIn("slow",function(){}); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 

    return false; 
}); 

HTMLコードを入力できる場合は、ボックスを相対的に取得する別の方法があります。

これが役に立ちます。

Answer 3

パラメータを使用して関数を記述できます。例えば。

function Clicked(elClicked) { 
    $(".textbox-analysis").hide() 
    $(elClicked).fadeIn("slow",function() { 
    }); 
    $("html, body").animate({ scrollTop: $(document).height() }, "slow"); 
    return false; 
} 

その後、

$("#litigation-click, #goingconcern-click, #unquoted-click").click(function() { 
    Clicked("#" + $(this).attr('id')); 
}); 

$(this).attr('id')をクリックされた要素のidの引数で、あなたのクリックイベントでその関数を呼び出すには、要素のidをクリックします。