Question

上载任何文件时，其所有输入字段以相同的值显示，甚至出现“清除并更改”按钮。另外，如果单击清除按钮，则会清除所有字段。

我在下面的代码段中附加了html，JavaScript和CSS。

每个字段如何唯一地起作用？谢谢你。

演示：https://jsfiddle.net/sanjida96xq2/5gLqthrj/12/

        htmlText = post.cloths_description;


    String text = "<html><head>"
            + "<style>img{max-width:100%;height:auto;} figure{max-width:100%;height:auto;} iframe{width:100%;}</style> "
            + "<style type=\"text/css\">body{color: #000000;}"
            + "</style></head>"
            + "<body>"
            + htmlText
            + "</body></html>";

Answer 1

我已经在这里修复了您的JS小提琴示例-

https://jsfiddle.net/5gLqthrj/27/

那必须更新什么？

所有显示弹出窗口，更新文件等的代码均使用通用$('.image-preview') jQuery选择器代码。但是，所有3个文件上传器都使用该类，因此，每当您使用该代码时，都会选择并更新所有三个。您需要更加具体，当然，只需选择一个即可点击。

那怎么办？

有不同的方法，但这是一个简单的解决方案：

当jQuery中绑定了一个事件（如您正在使用的click或hover时），您可以将$(this)（或$(event.currentTarget)）引用到找出确切地单击了WHICH元素。然后，只更新this，而不用更新该类的 all 元素。您还有其他一些选择器，需要使用类似的未完全确定的选择器问题进行更新，因此，我没有进行批发的$('.selector-here')抓取，而是将代码更改为仅使用{ {1}}，例如.find

希望这对您有意义：）

$(this).find('.selector-here')

$(document).on('click', '#close-preview', function(){ 
    $('.image-preview').popover('hide');
   
    $('.image-preview').hover(
        function () {
           $(this).popover('show');
        }, 
         function () {
           $(this).popover('hide');
        }
    );    
});

$(function() {
   
    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");
   
    $('.image-preview').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });
    
    $('.image-preview-clear').click(function(){
        var $preview = $(this).closest('.image-preview');
        $preview.attr("data-content","").popover('hide');
        $preview.find('.image-preview-filename').val("");
        $preview.find('.image-preview-clear').hide();
        $preview.find('.image-preview-input input:file').val("");
        $preview.find(".image-preview-input-title").text("Browse"); 
    }); 
  
    $(".image-preview-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });      
        var file = this.files[0];
        var reader = new FileReader();
        var $preview = $(this).closest('.image-preview');
        reader.onload = function (e) {
            $preview.find(".image-preview-input-title").text("Change");
            $preview.find(".image-preview-clear").show();
            $preview.find(".image-preview-filename").val(file.name);            
            img.attr('src', e.target.result);
            $preview.attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        reader.readAsDataURL(file);
    });  
});

.container{
    margin-top:20px;
}
.image-preview-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.image-preview-input input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
}
.image-preview-input-title {
    margin-left:2px;
}

如何防止输入字段重复？

1 个答案: