增量计数以限制用户可以动态添加表单元素的次数

Question

我从一个 jquery 函数开始，获得了相关帮助，然后又对其进行了一些修改。我下面的代码有效。

HTML:

<a href="javascript:void(0);" class="add_project" title="Add project"><i data-feather="plus-circle"></i> Add another project</a>

Javascript:

jQuery(function($) {
  const projectHTML = `<tr>
    <td>
      <select name="improvement_project[]" class="custom-select">
          <option selected>Select project</option>
        <optgroup label="Interior">
          <option>New Master/Owner's Suite</option>
          <option>Kitchen Upgrade</option>
       </select>
     </td>
  </tr>`;

  const $projects   = $("#projects");
  const $addProject = $('.add_project');
  const arrRow = () => $projects.append(projectHTML);

  $addProject.on("click", arrRow);
  ...
  });
});

单击“添加另一个项目”按钮会将项目HTML 添加为另一个下拉菜单。我想做的是限制用户可以添加另一个下拉菜单的次数，比如 5 次。我已经在后端进行了限制，但是当然最好在 UI.

上进行限制

我设置了一个最大变量和计数器变量：

var maxprojects = 5;
var counter = 1;

然后尝试在 $addProject.on("click", arrRow); 周围添加一些代码，例如：

if (counter < maxprojects) {
  $addProject.on("click", arrRow);
  counter++;
}

但这并不能阻止点击添加超过 5 个项目。

请帮助我了解我完全出错的地方。

谢谢！

Answer 1

简单的解决方案是在新项目行中添加一个 class 并在添加另一个

之前获取该 class 的长度

const projectHTML = `<tr class="project-row">....</tr>`;

const arrRow = () => {
  if($('tr.project-row').length < 5){
     $projects.append(projectHTML);
  }
};

增量计数以限制用户可以动态添加表单元素的次数

Increment count to limit number of times a user can dynamically add a form element

html

javascript

jquery

dynamic

increment