使用对多个元素的jquery函数的调用

Using call on a jquery function for multiple elements

本文关键字：jquery 函数 调用 元素      更新时间：2023-09-26

我有下面的代码，它的作用是，当点击按钮时，它会在具有特定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");
});
});

老实说，如果你在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
  });
});

在页面上描述你真正想做什么，我可以帮你更多的忙。

相关文章：