当输入文件有值时显示按钮重置

Question

我尝试为输入文件创建按钮重置。每次输入文件都有值，然后显示一个按钮来重置输入文件。问题是，我有6个输入文件。当我在其中一个输入文件上传图像时，所有按钮都显示出来，即使其他输入文件也没有价值。 如何制作特定的按钮？

我这样的代码

$("#inputFile1").change(function(){ 
    if($(this).val() == "") 
    $('.reset').css({"display": "none"}); 
    else 
    $('.reset').css({"display": "block"}); 
}) 
$("#inputFile2").change(function(){ 
    if($(this).val() == "") 
    $('.reset').css({"display": "none"}); 
    else 
    $('.reset').css({"display": "block"}); 
}) 
$("#inputFile3").change(function(){ 
    if($(this).val() == "") 
    $('.reset').css({"display": "none"}); 
    else 
    $('.reset').css({"display": "block"}); 
}) 

继承人的jsfiddle https://jsfiddle.net/30uv0kfa/

Answer 1

我包围每个组input文件和button的一个div和简化您的JS代码。

$(document).ready(function() { 
 
    $(".input-file").on("change", function(){ 
 
    if($(this).val() == "") { 
 
     $(this).parent().find(".reset").css({"display": "none"}); 
 
    } else { 
 
     $(this).parent().find(".reset").css({"display": "block"}); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <input class="input-file" id="inputFile1" type="file"/> 
 
    <button class="reset" style="display:none">reset</button> 
 
</div> 
 
<div> 
 
    <input class="input-file" id="inputFile2" type="file"/> 
 
    <button class="reset" style="display:none">reset</button> 
 
</div> 
 
<div> 
 
    <input class="input-file" id="inputFile3" type="file"/> 
 
    <button class="reset" style="display:none">reset</button> 
 
</div> 
 
<div> 
 
    <input class="input-file" id="inputFile4" type="file"/> 
 
    <button class="reset" style="display:none">reset</button> 
 
</div> 
 
<div> 
 
    <input class="input-file" id="inputFile5" type="file"/> 
 
    <button class="reset" style="display:none">reset</button> 
 
</div>

Answer 2

各自的ID设置为按钮将做的工作。勾选此

$("#inputFile1").change(function(){ 
    if($(this).val() == "") 
    $('.reset1').css({"display": "none"}); 
    else 
    $('.reset1').css({"display": "block"}); 
}) 

https://jsfiddle.net/30uv0kfa/1/

Answer 3

你可以把它像

$("#inputFile1,#inputFile2,#inputFile3,#inputFile4,#inputFile5").change(function(){ 
    if($(this).val() == "") 
    $(this).next('.reset').css({"display": "none"}); 
    else 
    $(this).next('.reset').css({"display": "block"}); 
}) 

Answer 4

有这样做的一个简单的方法。我已经编辑好提琴 JS fiddle URL

$("input[type='file']").change(function(){ 
    if($(this).val() == "") 
    $(this).next('.reset').css({"display": "none"}); 
    else 
    $(this).next('.reset').css({"display": "block"}); 
}); 

Answer 5

• 使用class/attribute选择代替id以减少冗余
• 使用.next(SELECTOR)立即选择该集合中匹配的元素的以下各元素的同级
• 使用toggle(BOOLEAN)玩reset按钮的可见性而不是.css方法

$('[type="file"]').change(function() { 
 
    $(this).next('button').toggle(this.value !== ''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input id="inputFile1" type="file" /> 
 
<button class="reset" style="display:none">reset</button> 
 
<input id="inputFile2" type="file" /> 
 
<button class="reset" style="display:none">reset</button> 
 
<input id="inputFile3" type="file" /> 
 
<button class="reset" style="display:none">reset</button> 
 
<input id="inputFile4" type="file" /> 
 
<button class="reset" style="display:none">reset</button> 
 
<input id="inputFile5" type="file" /> 
 
<button class="reset" style="display:none">reset</button>

Answer 6

如果你仍然想使用相同的class每个按钮，那么你可以添加独特id每个按钮，并在脚本中使用它。

$("#inputFile1").change(function(){ 
 
    if($(this).val() == "") 
 
    $('#rfile1').css({"display": "none"}); 
 
    else 
 
    $('#rfile1').css({"display": "block"}); 
 
}) 
 
$("#inputFile2").change(function(){ 
 
    if($(this).val() == "") 
 
    $('#rfile2').css({"display": "none"}); 
 
    else 
 
    $('#rfile2').css({"display": "block"}); 
 
}) 
 
$("#inputFile3").change(function(){ 
 
    if($(this).val() == "") 
 
    $('#rfile3').css({"display": "none"}); 
 
    else 
 
    $('#rfile3').css({"display": "block"}); 
 
}) 
 
$("#inputFile4").change(function(){ 
 
    if($(this).val() == "") 
 
    $('#rfile4').css({"display": "none"}); 
 
    else 
 
    $('#rfile4').css({"display": "block"}); 
 
}) 
 
$("#inputFile5").change(function(){ 
 
    if($(this).val() == "") 
 
    $('#rfile5').css({"display": "none"}); 
 
    else 
 
    $('#rfile5').css({"display": "block"}); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="inputFile1" type="file"/> 
 
<button class="reset" id="rfile1" style="display:none">reset</button> 
 
<input id="inputFile2" type="file"/> 
 
<button class="reset" id="rfile2" style="display:none">reset</button> 
 
<input id="inputFile3" type="file"/> 
 
<button class="reset" id="rfile3" style="display:none">reset</button> 
 
<input id="inputFile4" type="file"/> 
 
<button class="reset" id="rfile4" style="display:none">reset</button> 
 
<input id="inputFile5" type="file"/> 
 
<button class="reset" id="rfile5" style="display:none">reset</button>

没有添加唯一的ID给每个按钮的另一种方法是input[type='file']创建一个一般change事件：

$("input[type='file']").change(function(){ 
    if($(this).val() == "") 
    $(this).next('.reset').css({"display": "none"}); 
    else 
    $(this).next('.reset').css({"display": "block"}); 
}); 

Answer 7

看到这里jsfiddle

更多的响应代码，不要在html中使用内联css。如果你有更多的按钮，你将不得不为每个按钮编写display:none。这不是一个好的理念:)。你也不必分配在HTML类.reset和绝对没有不同的ID给每个按钮

使用本

HTML：

<input id="inputFile1" type="file"/> 
<button>reset</button> 
<input id="inputFile2" type="file"/> 
<button>reset</button> 
<input id="inputFile3" type="file"/> 
<button>reset</button> 
<input id="inputFile4" type="file"/> 
<button>reset</button> 
<input id="inputFile5" type="file"/> 
<button>reset</button> 

CSS：

input[type='file'] + button { display:none} 

JQ：

$("input[type='file']").change(function(){ 
var reset = $(this).next('button').addClass("reset") 

    if($(this).val() == "") 
     $(reset).css({"display": "none"}); 
    else 
     $(reset).css({"display": "block"}); 
});