克隆<div>并更改img上传的id

Question

出于好奇并自学如何编码，我决定制作一个 Twitter 模仿器。到目前为止，我一直做得很好——我正在努力做到这一点，这样你就可以点击“克隆推文”按钮，它会克隆推文的基础，但允许你将图标更改为你喜欢的任何内容。但是，每次我尝试上传任何内容时，它只会更改第一个图标，即“垫子”，又称为推文图标。我不知道如何让它正常工作，并且希望得到一些帮助来解决这个问题。

这是我使用的代码： https://codepen.io/laurenlola/pen/GRLPOyJ?editors=0010

javascript

let c = 0 
function IDgenerate() { 
return c++ 
   } 
$("#clickme").on("click", function() { 
   var cn = IDgenerate(); 
                
     let clone = $("#cloneme").clone() 
     clone.css("display", "inline-block") 
      clone.find('#setID').attr("id", cn) 
       clone.find("#cancel").attr("id", "cancel" + cn) 
                clone.find("#cancel" + cn).on("click", function() { 
                        clone.css("display", "none") 
                    }) 
                $("#bucket").append(clone) 
            }) 

 //imageupload
function showMyImage(fileInput) {
  var files = fileInput.files;
    for (var i = 0; i < files.length; i++) {           
        var file = files[i];
        console.log(file.name);
        var imageType = /image.*/;     
        if (!file.type.match(imageType)) {
            continue;
        }           
        var img=document.getElementById("thumbnil");            
        img.file = file;    
        var reader = new FileReader();
        reader.onload = (function(aImg) { 
            return function(e) { 
                aImg.src = e.target.result; 
            }; 
        })(img);
        reader.readAsDataURL(file);
        thumbnil.style.display = 'block';

    }
  }

HTML

    <div class="matweet"> 
              <div class="avatar-wrapper">
        <div class="upload-button"> 
            <input type='file' id="upload" onchange="showMyImage(this)" class="fa fa-arrow-circle-up"  aria-hidden="true" />
        <img id="thumbnil" src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" style="display: block;width: 50px;height: 50px;margin: 0 0 -5px -5px"/></div>
    </div>      
        <input type="text" placeholder="What is happening?!"></div>

        <div class="maticons">
                    <i class="fa-regular fa-image" style="color: #1d9bf0;"></i>&emsp;&nbsp;
                    <i class="fa-regular fa-box" style="color: #1d9bf0;"></i>&emsp;&nbsp;
                    <i class="fa-solid fa-list" style="color: #1d9bf0;"></i>&emsp;&nbsp;
                    <i class="fa-regular fa-smile"  style="color: #1d9bf0;"></i>&emsp;&nbsp;
                    <i class="fa-regular fa-calendar"  style="color: #1d9bf0;"></i>&emsp;&nbsp;
                    <i class="fa-solid fa-location-dot"  style="color: #1d9bf0;"></i>
                    
                    <button class="button button1">
                    Post
                    </button>
        </div>     
                    
        </div>
  <!---- Avatar upload end-->
        <div id="cloneme">
        <div class="tweet">
            <div class="twticon">
     <div class="avatar">
        <div class="upload-button">  
            <input type='file' id="upload" onchange="showMyImage(this)" class="fa fa-arrow-circle-up"  aria-hidden="true" />
        <img class="thumbnil"  id="setID" src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" alt="logo" style="display: block;width: 50px;height: 50px;margin: -5px"/></div>
    </div>
    </div>  
            <b><div class="username" contentEditable="true">Usernames</b>&emsp;<text style="color:gray">@username</text></div><br>
        <div class="tweetst" contentEditable="true"> Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
        <p></div>
        <div class="tweeticons">
        
        <i class="fa-solid fa-comment"  style="color:gray">&thinsp;</i><b div  style="color:gray" contentEditable="true" >24K</b>&emsp;&emsp;&emsp;
        <i class="fa-solid fa-undo"  style="color:gray">&thinsp;</i><b div  style="color:gray" contentEditable="true">754K</b></i>&emsp;&emsp;&emsp;
        <i class="fa-solid fa-heart"  style="color:gray">&thinsp;</i><b div  style="color:gray" contentEditable="true">9.1K</b></i>&emsp;&emsp;&emsp;
        <i class="fa-solid fa-bar-chart" style="color:gray">&thinsp;</i><b div  style="color:gray" contentEditable="true" maxlength="4">257K</b> &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&thinsp;&thinsp;&thinsp;
        <i class="fa-solid fa-bookmark"  style="color:gray">&thinsp;</i>
        </div>
</div>
</div>

    <div id="bucket" class="container-fluid"> 

</div>

<button type="button" class="btn btn-success" id="clickme" >Clone Tweet</button> 

再次非常感谢您的帮助。

我尝试了几种不同的方法来克隆和更改 id，但我只是不确定如何将它们连接在一起以便在点击克隆按钮时正确更改

Answer 1

问题出在你的 JS

showMyImage(fileInput)

函数中。

这一行：

var img=document.getElementById("thumbnil");

它正在访问 id 为

thumbnil

的元素，该元素只是位于“发生了什么？！”左侧的图标。

如果您想更改每条推文中的图标，请将其替换为：

var img= fileInput.parentNode.querySelector(".thumbnil");

每条推文中的图标都有

thumbnil

类，可用于选择该元素来替换

src

图像。使用了

fileInput.parentNode

，因此它只会选择上传按钮/图标 (^) 旁边的类

thumbnil

。

注意：如果您希望图标（“发生了什么！？”左侧）也发生变化，请向其添加类

thumbnil

。

在 HTML 文件中，添加

class="thumbnil"

:

<img id="thumbnil" class="thumbnil"  src="https://t3.ftcdn.net/jpg/05/08/88/82/360_F_508888212_50sPZWAnDEe0IdZGwd5fb1CUDEFPNJgy.jpg" style="display: block;width: 50px;height: 50px;margin: 0 0 -5px -5px"/></div>

另请注意，如果您更改基本推文的图标（克隆推文按钮上方），它也将是克隆的图标。