Question

我有一个输入按钮，我的样式是这样的：

<span class="btn btn-file btn-default">
    <span class="text"></span>
    <input type="file" id="fileinput" name="uploaded_file" />
</span>

用这个jQuery改变它：

$(document).ready(function(){
     $(".text").html("Change Avatar");
     $('#fileinput').on('change', function() {
         $(".text").text('Avatar Selected');
     });
 });

默认情况下，它会显示＆＃39;更改头像＆＃39;。当某人选择了一张照片时，它会变为“已选择的头像”。

我也希望将其从btn-default更改为btn-selected。

我该怎么做？

Answer 1

您可以使用.toggleClass() method来切换两个类。

$(this).closest('.btn').toggleClass('btn-default btn-selected');

$(".text").html("Change Avatar");
$('#fileinput').on('change', function () {
    $(".text").text('Avatar Selected');
    $(this).closest('.btn').toggleClass('btn-default btn-selected');
});

我建议检查是否确实存在指定的文件，因为用户可能会选择一个文件然后取消选择它。

$('#fileinput').on('change', function () {
    if (this.value) {
        // ...
    } else {
        // ..
    }
});

您也可以使用以下内容：

Example Here

$('#fileinput').on('change', function () {    
    $(".text").text(this.value ? 'Avatar Selected' : 'Change Avatar');
    $(this).closest('.btn').removeClass('btn-selected btn-default')
           .addClass(this.value ? 'btn-selected' : 'btn-default');
});

这样做，如果实际选择了一个文件，父按钮元素将只有类.btn-selected（即使文件未被选中然后重新选择;与上面的第一个建议不同）。

如何在更改时更改按钮的类？

1 个答案: