Question

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

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

在我的Javascript中，我选择ID来触发每个功能。

我尝试在每个ID的末尾添加+ 1等，但是这会改变ID的名称，使新创建的DIV不起作用。

我已经考虑过使用DataAttribues，但我仍然有同样的问题，必须创建多个功能，所有人都做同样的工作。

有什么想法吗？

由于

＆＃13;

$(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);
  });
}

＆＃13;

/*
#### 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;

}

＆＃13;

<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>

＆＃13;

Answer 1

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

更好的选择是使用公共类和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); }); });。像这样：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

clone()

＆＃13;

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

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

最后，请注意，由于您完全覆盖了现有值，因此您无需向class ABC class MyClass { private lateinit var abc: ABC fun abc() { if(!::abc.isInitialized){ println("Hello") } } }提供功能。只提供新字符串就可以了。

AppendTo但每个新的append都是唯一的，但仍然使用相同的jquery

1 个答案: