javascript - Jquery根据id克隆带有标签的输入

Question

您好，我有一个输入文件，我喜欢输入样式，但如果没有标签和 ID，我就无法获取它

我花了几个小时解决了这个问题，我只是想知道是否有更好的解决方案？

          $("body").on("click",".btn-success",function(){
          $('.clone .custom-file-label').attr('class', 'custom-file-label')
          var html = $(".clone").html();
          var NewN = html.match(/id="(.*?)"/)[1];
          $('#' + NewN).attr("id", parseInt(NewN) + 1);
          $('.clone .custom-file-label').attr("for", parseInt(NewN) + 1);
          $(".increment").after(html);
      });

      $("body").on("click",".btn-danger",function(){
          $(this).parents(".control-group").remove();
      });

https://jsfiddle.net/jctrn2kh/1/

Answer 1

1. 我肯定会将逻辑与 DOM 解耦(例如，不依赖 DOM 来获取 ID)
2. 将模板放在 JS 脚本中，这样我就可以轻松修改其使用的外观和逻辑
3. 会减少对动态创建的元素(例如不是“主体”而是“容器”)的点击使用react的范围
4. 我会提取所有 CSS 样式以分离 CSS

此片段中的所有内容:

// keeping track of IDs
let id = 1

// create item to be appended
const addFileInput = (id) => {
  // creating base node that will be returned
  const node = document.createElement('div')
  // setting classes on base node
  node.classList.add('custom-file', 'mb-3')
  // creating innerHTML of node
  node.innerHTML = `<input type="file" name="filename[]" id="${id}">
  <button class="btn btn-${id === 1 ? 'success' : 'danger'}" type="button">${id === 1 ? '+' : '-'}</button>
  <label class="custom-file-label" for="${id}">Choosse file</label>`
  // returning the node
  return node
}

// append the first input field (type: node)
const container = document.getElementById('field-container')
container.appendChild(addFileInput(id))

// functions for onClick
$(document).ready(function() {

  $(container).on("click", ".btn-success", function() {
    // incrementing the ID BEFORE appending
    container.appendChild(addFileInput(++id))
  });

  $(container).on("click", ".btn-danger", function() {
    // removing the exact element
    $(this).parents('.custom-file').remove();
  });

});

.control-group .custom-file {
  width: 300px;
  display: flex;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="field-container" class="control-group">
  <!-- will be filled out by JavaScript -->
</div>

这段代码可能看起来并不比你的简单，但它可以更容易修改

• 这里创建的模板是基础，如果你修改它，一切都会跟随修改
• 这些函数不依赖于任何 ID - 如果您忽略它们，点击仍然会添加和删除项目(好吧，标签和字段将无法组合在一起)