如何更改更改按鈕的類別？

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'); 
    }); 
}); 

默認情況下，它顯示「更改阿凡達」。當有人選擇了一張照片時，它會更改爲「已選頭像」。

我也想把它從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如果確實選擇了一個文件（即使一個文件被取消選擇然後重新選擇;不像上面的第一個建議）。