javascript - AppendTo 但每个新追加都是唯一的但仍然使用相同的 jquery

Question

我想知道是否有可能在每个 appendTo 上使新的 div 唯一但仍然使用相同的 jquery。

正如您在下面的标记中看到的，每个新的 div 共享相同的 jquery，因此不能独立工作。

在我的 Javascript 中，我选择了 ID 来触发每个函数。

我试过在每个 ID 的末尾添加 + 1 等，但它会更改 ID 的名称，使新创建的 DIV 无法运行。

我考虑过使用 DataAttribues，但我仍然遇到同样的问题，必须创建多个函数来完成相同的工作。

有什么想法吗？

谢谢

$(function() {
  var test = $('#p_test');
  var i = $('#p_test .upl_drop').length + 1;

  $('#addtest').on('click', function() {
    $('<div class="file-input"><div class="input-file-container upl_drop"><label for="p_test" class="input-file-trigger">Select a file...<input type="file" id="p_test" name="p_test_' + i + '" value=""class="input-file"></label></div><span class="remtest">Remove</span><p class="file-return"></p></div>').appendTo(test);
    i++;
  });


  $('body').on('click', '.remtest', function(e) {
    if (i > 2) {
      $(this).closest('.file-input').remove();
      i--;
    }
  });
});


var input = document.getElementById( 'file-upload' );
var infoArea = document.getElementById( 'file-upload-filename' );

input.addEventListener( 'change', showFileName );

function showFileName( event ) {

  // the change event gives us the input it occurred in
  var input = event.srcElement;

  // the input has an array of files in the `files` property, each one has a name that you can use. We're just using the name here.
  var fileName = input.files[0].name;

  // use fileName however fits your app best, i.e. add it into a div
  textContent = 'File name: ' + fileName;

  $("#input-file-trigger").text(function () {
      return $(this).text().replace("Select a file...", textContent);
  });
}

/*
#### Drag & Drop Box ####
*/

.p_test{
  display: inline-block;
}

.upl_drop{
  border: 2px dashed #000;
  margin: 0px 0px 15px 0px;
}

.btn--add p{
  cursor: pointer;
}

.input-file-container {
  position: relative;
  width: auto;
}
.input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #ffffff;
  color: #1899cd;
  font-size: 1em;
  cursor: pointer;
}
.input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
 .input-file:hover + .input-file-trigger,
 .input-file:focus + .input-file-trigger,
 .input-file-trigger:hover,
 .input-file-trigger:focus {
  background: #1899cd;
  color: #ffffff;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="p_test" id="p_test">
  <div class="file-input">
    <div class="input-file-container upl_drop">
      <input class="input-file" id="file-upload" type="file">
      <label tabindex="0" for="file-upload" id="input-file-trigger" class="input-file-trigger">Select a file...</label>
    </div>
    <div id="file-upload-filename"></div>
  </div>
  <button class="btn--add" id="addtest">
          Add
  </button>
</div>

Answer 1

我建议不要使用增量 id 属性。它们变得难以维护，并且使逻辑比需要的复杂得多。

更好的选择是使用公共(public)类和 DOM 遍历，根据引发任何给定事件的元素将元素彼此关联起来。

在您的情况下，您可以使用 closest() 获取父 .file-input 容器，然后使用 find() 任何元素在它的 class 中。像这样:

$(function() {
  var $test = $('#p_test');

  $('#addtest').on('click', function() {
    var $lastGroup = $test.find('.file-input:last');
    var $clone = $lastGroup.clone();
    $clone.find('.input-file-trigger').text('Select a file...');
    $clone.insertAfter($lastGroup);
  });

  $test.on('click', '.remtest', function(e) {
    if ($('.file-input').length > 1) 
      $(this).closest('.file-input').remove();
  }).on('change', '.input-file', function(e) {
    if (!this.files)
      return;
      
    var $container = $(this).closest('.file-input');
    $container.find(".input-file-trigger").text('File name: ' + this.files[0].name);
  });
});

.p_test {
  display: inline-block;
}

.upl_drop {
  border: 2px dashed #000;
  margin: 0px 0px 15px 0px;
}

.btn--add p {
  cursor: pointer;
}

.input-file-container {
  position: relative;
  width: auto;
}

.input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #ffffff;
  color: #1899cd;
  font-size: 1em;
  cursor: pointer;
}

.input-file {
  position: absolute;
  top: 0;
  left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}

.input-file:hover+.input-file-trigger,
.input-file:focus+.input-file-trigger,
.input-file-trigger:hover,
.input-file-trigger:focus {
  background: #1899cd;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="p_test" id="p_test">
  <div class="file-input">
    <div class="input-file-container upl_drop">
      <input class="input-file" type="file">
      <label tabindex="0" for="file-upload" class="input-file-trigger">Select a file...</label>
    </div>
    <div class="file-upload-filename"></div>
  </div>
  <button class="btn--add" id="addtest">Add</button>
</div>

请注意，我对代码进行了一些其他优化。首先，当单击 Add 按钮时，它现在为最后一个可用的 .file-input 容器创建一个 clone()。这比在 JS 文件中编写 HTML 更可取，因为它使两者完全分开。例如，如果您需要更新 UI，现在无需担心更新 JS，只要类保持不变即可。

另请注意，您最初混合了纯 JS 和 jQuery 事件处理程序。最好使用其中之一。因为您已经在页面中包含 jQuery，所以我使用了它，因为它使代码更易于编写且更简洁。

最后，请注意您不需要为 text() 提供函数，因为您完全覆盖了现有值。只需提供新字符串即可。