複数の要素のjquery関数での呼び出しの使用

Question

私は以下のコードを持っています。ボタンをクリックすると、特定のid属性を持つdivの後に挿入されます。後に挿入されるdivを指定するために使用されるカウンタをインクリメントします。

それはすべて動作しますが、私が知りたいことは何ですか？このコードをどのように変更すれば、プロパティを持つオブジェクトを作成してから挿入するためのメソッドを作成し、最後に特定のjquery要素を呼び出してジョブを完了させることができます。

私は、このメソッドを同じ原則に従うが、オブジェクトのプロパティが異なる他のオブジェクトで使用したいので、単一のメソッドを使用して異なるプロパティを持つ別のオブジェクトを呼び出し、異なるdivの後に挿入します。

$(document).ready(function() { 

counter = 0; 
$("#addMeasurement").on("click", function() {++counter; 
    //create variables for insert after 
    var container = '<div id="measurement_container' + counter + '" class="col-12 object">' 
    var icon = '<span id="measurement_icon' + counter + '" class="flaticon-glass-of-water-with-drop" title="Measurement"></span>'; 
    var info_span = '<span id="measurement_info' + counter + '" class="">'; 
    var info_mT = '<input class="toTop" type="text" name="measurementType' + counter + '" id="measurementType' + counter + '" placeholder="Measurement" size="10">'; 
    var info_mA = '<input class="toTop" style="margin-left:90px;" type="text" name="measurementAbbr' + counter + '" id="measurementAbbr' + counter + '" placeholder="Abbr" size="3">'; 
    var info_mTi = '<input class="toTop" style="margin-top:25px;" type="text" name="measurementTitle' + counter + '" id="measurementTitle' + counter + '" placeholder="Name" size="10"> '; 
    var info_mD = '<input class="toTop" style="margin-top:25px; margin-left:90px; width:3.5em;" type="number" name="measurementDescimalPlaces' + counter + '" id="measurementDescimalPlaces' + counter + '" min="0" max="4" title="Descimal points" placeholder=".DP">'; 

    $(container + icon + info_span + info_mT + info_mA + info_mTi + info_mD + '</span>' + '</div>').insertAfter("#measurement_container" + (-1 + counter)); 

}); 
}); 

私はこのようなことをしたいと思います（わかりやすくするためにオブジェクトのいくつかのプロパティを省略しました）。

$(document).ready(function(){ 
var counter = 0; 

var measurement_object = { 
container : '<div id="measurement_container' + counter + '" 

class="col-12 object">',  
icon: '<span id="measurement_icon' + counter + '" class="flaticon-glass- 

of-water-with-drop" title="Measurement"></span>' 
} 

function duplicate_object(el){ 
$(this).insertAfter(el); 
} 

$("#addMeasurement").on("click", function(){ 
duplicate_object.call(duplicate_object,"#measurement_container0"); 
}); 
}); 

Answer 1

本当にあなたのJSでその多くのHTMLを挿入しているなら、私は一歩前進して他のオプションを検討したいと思います。これは通常、間違った方法で何かに近づいているコード匂いです。

このように、この単純な関数のファクトリを作成する必要はありません。この関数の中核的な機能は次のとおりです。私は時間のために要素の建物を略しています：

$(document).ready(function() { 
 
    var count = 0; 
 
    
 
    $('#addMeasurement').on('click', function() { 
 
    var div = document.createElement('div'); 
 
    
 
    // This should be a class, since you're using it more than once. 
 
    $(div).insertAfter('#measurement_container'); 
 
    
 
    count++; 
 
    }); 
 
    
 
    $('.other-element').on('click', function() { 
 
    console.log(count); // Outputs # of elements added 
 
    }); 
 
});

は、あなたが実際にページ上で何をしたいのか説明して、そして私はもう少しを助けることができます。