0

我有这种工作....那种。我有一个 Javascript，它基本上提供了要上传的文件列表。它工作正常...

    window.onload = function() {
      const inputElement = document.getElementById("my_files");
      const fileNames = document.getElementById("file_names");
      let fileList = [];

      function removeFile(event) {
        event.preventDefault();

        let filename = this.dataset.filename;
        let modifiedFileList = new DataTransfer();
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].name !== filename) {
            modifiedFileList.items.add(fileList[i]);
          }
        }

        inputElement.files = modifiedFileList.files;
        fileList = inputElement.files;
        handleFiles(fileList);
        return false;
      }

      inputElement.addEventListener("change", handleFilesListener, false);
      function handleFilesListener() {
        fileList = this.files;
        handleFiles(fileList);
      }

      function handleFiles(fileList) {
        fileNames.textContent = '';
        for (let i = 0; i < fileList.length; i++) {
          let listElement = document.createElement("li");
          let textNode = document.createTextNode(fileList[i].name);

          listElement.appendChild(textNode);
          listElement.setAttribute("class","attachmentname");

          let removeButton = document.createElement("button");

          removeButton.innerHTML = "Remove&nbsp";
          removeButton.setAttribute('type', 'button')
          removeButton.setAttribute("class", "button121");
          removeButton.setAttribute('data-filename', fileList[i].name)
          removeButton.addEventListener('click', removeFile)
          listElement.appendChild(removeButton);
          fileNames.appendChild(listElement);
        }
      }
    }

但是我试图在用户单击删除按钮时删除文件时合并淡出....

我尝试使用 JQuery，因为这是一个动态的情况......而且它有点工作......

$(document).ready(function (){

$(".box12").on("click", ".attachmentname", function () {
  $(this).fadeOut(1500);
});

$(".button121").on("click", function () {
  $(".box12").append(".attachmentname");
});

});

当我单击附件名称时……名称正在淡出。动态部分正在工作......它正在查找附件名称并适当地淡出。但是，我想要做的是当用户单击按钮时，附件名称会随着按钮一起淡出。我似乎无法让它以这种方式工作。就像用户单击附件名称一样。

下面来看看 DOM...

<li class="attachmentname">3circs - Copy - Copy - Copy - Copy - Copy - Copy - Copy (3) - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy.PNG<button type="button" class="button121" data-filename="3circs - Copy - Copy - Copy - Copy - Copy - Copy - Copy (3) - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy - Copy.PNG">Remove&nbsp;</button></li>

我怀疑当用户单击删除按钮时，列表刚刚被刷新，所以这可能就是为什么只有在单击附件名称时，淡出才会在按钮单击时生效？关于如何按照我想要的方式完成工作的任何想法？提前致谢。

4

0 回答 0