提交时改变图片来源

Question

点击提交按钮后，我想更改innerHtml数据中的图片源。

<div id="areaEditor"> 
    <div class="holder"> 
     <img src="blob.blob"/> 
     <input class="filesss" type="file" value="one.jpg"/> 
    </div> 

    <div class="holder"> 
     <img src="blob.blob"/> 
     <input class="filesss" type="file" value="two.jpg"/> 
    </div> 

    <div class="holder"> 
     <img src="blob.blob"/> 
     <input class="filesss" type="file" value="three.jpg"/> 
    </div> 
</div> 


$('#newsButton').click(function(e){ 
    e.preventDefault(); 
    alert("klik"); 

    var source = $(".holder").find(".filesss").val(); 
    var imageTag = $(".holder").find("img").attr("src",source); 
    var htmlData = $("#areaEditor").html(); 

    alert(htmlData); 

}) 

但是，这里的htmlData I alert只显示我所有三个图片标签的img src都是one.jpg。

如何使其更正，以便图像src基于每个最接近的输入文件？

非常感谢您的帮助。

Answer 1

你有很多.holder元素，你应该循环他们，让各个区域中.filesss值并更换图片​​src如下：

$('#newsButton').click(function(e){ 
    e.preventDefault(); 
    alert("klik"); 

    $(".holder").each(function() { 
     var source = $(this).find(".filesss").val(); 
     $(this).find("img").attr("src", source); 
    }); 

    var htmlData = $("#areaEditor").html(); 
}) 

Answer 2

的想法是遍历所有的元素，因此它可以采取每次都有一个值，就你的情况而言;您告诉JQuery从类holder中获取源代码，它在第一个元素中找到它，因此它不需要查找其他任何东西。

所以，你可以这样做：

<div id="areaEditor"> 
     <div class="holder"> 
      <img src="blob.blob"/> 
      <input class="filesss" type="file" value="one.jpg"/> 
     </div> 

     <div class="holder"> 
      <img src="blob.blob"/> 
      <input class="filesss" type="file" value="two.jpg"/> 
     </div> 

     <div class="holder"> 
      <img src="blob.blob"/> 
      <input class="filesss" type="file" value="three.jpg"/> 
     </div> 
    </div> 
    <script> 
    $('#newsButton').click(function(e){ 
     e.preventDefault(); 
     alert("klik"); 

     $(".holder").each(function() { 
      var source = $(this).find(".filesss").val(); 
      $(this).find("img").attr("src",source); 
     }); 

     var htmlData = $("#areaEditor").html(); 
     alert(htmlData); 
    }) 
</script>