使用Glyphicon按鈕而不是TEXT鏈接

Question

再次感謝您提前對我的評論和善意的幫助，我在論壇上收到。我會盡量保持我的要求簡單。

簡而言之，我有工作的.js代碼，它允許我在webapp中保存變量。 '按鈕'目前是一個文本鏈接來啓動保存過程，但我需要使用某個圖形文字而不是文本鏈接（SAVE PROJECT），並且無法弄清楚如何在javascript中調用這個。此外，這將有兩種狀態，禁用按鈕和啓用按鈕。同樣，它目前像使用文本鏈接的冠軍一樣工作。

這是我的代碼的一個例子。設置應用程序變量時...此鏈接「按鈕」被禁用。

$(".setup").on("click", function(){ 
    if(!$(this).hasClass("disabled")){ 

     if(W != undefined && H != undefined){ 
      init(); 
     } 

     var w = parseInt($("#setup").css("width")), h = parseInt($("#setup").css("height")), 
      t = (height - h)/2+50, l = (width - w)/2; 

     $("#setup").css("top", t + "px"); 
     $("#setup").css("left", l + "px"); 
     $("#setup").css("display", "block"); 

     $("#height").val(redRet.height()); 
     $("#width").val(redRet.width()); 

     $(".load").removeClass("disabled"); 

     $(".save").text("SAVE PROJECT"); 
     $(".save").addClass("disabled"); 
     progressing = true; 
    } 
}) 

繪圖功能之後，我刪除了禁用的狀態，以便鏈接「按鈕」現在是活動的，允許選擇保存的內容。意思是，我也需要改變glyphyicon狀態。

$(".plot").on("click", function(){ 
    if(!$(this).hasClass("disabled")){ 
     $(".load").addClass("disabled"); 
     $(".save").removeClass("disabled"); 
    } 
}) 
var saveString, imageFileName, loginUser, progressing = false; 

$(".save").on("click", function(){ 
    if(!$(this).hasClass("disabled") && $(this).text() == "SAVE PROJECT"){ 
     $(".plot").addClass("disabled"); 
     saveString = '{'; 

      saveString += '"setup":{' 
       saveString += '"width":' + W + ','; 
       saveString += '"height":' + H + ','; 
       saveString += '"wRatio":' + wRatio + ','; 
       saveString += '"hRatio":' + hRatio ; 
      saveString += '},' 

      saveString += '"image":{' 
       saveString += '"name":"' + imageFileName + '",'; 
       saveString += '"width":' + kImage.width() + ','; 
       saveString += '"height":' + kImage.height() + ','; 
       saveString += '"x":' + kImage.x() + ','; 
       saveString += '"y":' + kImage.y() + ','; 
       saveString += '"scale":' + kImage.scale().x ; 
      saveString += '},' 

      saveString += '"redRet":{' 
       saveString += '"width":' + redRet.width() + ','; 
       saveString += '"height":' + redRet.height() + ','; 
       saveString += '"x":' + redRet.x() + ','; 
       saveString += '"y":' + redRet.y() ; 
      saveString += '},' 

      saveString += '"mainGroup":{' 
       saveString += '"width":' + mainGroup.width() + ','; 
       saveString += '"height":' + mainGroup.height() + ','; 
       saveString += '"x":' + mainGroup.x() + ','; 
       saveString += '"y":' + mainGroup.y() + ','; 
       saveString += '"scale":' + mainGroup.scale().x ; 
      saveString += '}' 

     saveString += '}' 

     if (saveString) { 
      $.ajax({ 
       type: "POST", 
       url: "http://domain.com/tester3/upload/save.php", 
       data: "user=" + loginUser + "&jsonString=" + saveString, 
       success: function(html){ 

         $("#message .modal-body").html("<p>"+html+"</p>"); 
         $("#message").modal(); 
       }, 
       error: function(error){ 

         $("#message .modal-body").html("<p>"+error+"</p>"); 
         $("#message").modal(); 
       } 
      }); 
     } 
    } 

綜上所述：我怎麼叫這一點，而不是...

$(".save").text("SAVE PROJECT"); 

謝謝比利。我遇到的問題是，html在按鈕類型上使用glyphicons（透明bgs），類中引用了引用字體的樣式表。

<div class="btnGroup">    
<button type="button" class="btn btn-trans setup"><span class="hexioglyph-setup"></span></button> 
<button type="button" class="btn btn-trans load disabled"><span class="hexioglyph-load"></span></button> 
<button type="button" class="btn btn-trans plot disabled"><span class="hexioglyph-plot"></span></button> 
<button type="button" class="btn btn-trans save disabled"><span class="hexioglyph-save"></span></button>     
</div> 

然後，它指向鏈接到字體的樣式表。

<link rel="stylesheet" href="hexioglyphs/css/hexioglyphs.css"> 

特殊樣式表的內容。

.btn-trans { 
    background: none; 
    box-shadow: none !important; 
     border:none !important; 
     outline: none !important; 
     active: none !important; 
} 


@font-face { 
    font-family: 'hexioglyphs'; 
    src: url('../font/hexioglyphs.eot?4598548'); 
    src: url('../font/hexioglyphs.eot?4598548#iefix') format('embedded-opentype'), 
    url('../font/hexioglyphs.woff?4598548') format('woff'), 
    url('../font/hexioglyphs.ttf?4598548') format('truetype'), 
    url('../font/hexioglyphs.svg?4598548#hexioglyphs') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
@font-face { 
    font-family: 'hexioglyphs'; 
    src: url('../font/hexioglyphs.svg?4598548#hexioglyphs') format('svg'); 

[class^="hexioglyph-"]:before, [class*=" hexioglyph-"]:before { 
    font-family: "hexioglyphs"; 
    font-style: normal; 
    font-weight: normal; 
    font-size: 3em; 
    speak: none; 

    display: inline-block; 
    text-decoration: inherit; 
    width: 1em; 
    margin-right: .2em; 
    text-align: center; 


    font-variant: normal; 
    text-transform: none; 


    line-height: 2em; 

margin-left: .2em; 


-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 


} 

.hexioglyph-setup { color: #959595;} 
.hexioglyph-setup:before { content: '\e801'; } 
.hexioglyph-setup:hover { color: #0090ff; } 

.hexioglyph-load { color: #959595;} 
.hexioglyph-load:before { content: '\e802'; } 
.hexioglyph-load:hover { color: #0090ff; } 

.hexioglyph-plot { color: #959595;} 
.hexioglyph-plot:before { content: '\e803'; } 
.hexioglyph-plot:hover { color: #0090ff; } 

.hexioglyph-save { color: #959595;} 
.hexioglyph-save:before { content: '\e804'; } 
.hexioglyph-save:hover { color: #0090ff; } 


.glyphicon-folder-open { color: #959595; } 
.glyphicon-folder-open:hover { color: #0090ff; } 

除保存按鈕外，其他所有字形都顯示正常。

Answer 1

明顯的改變src對你的字形

var button=document.getElementById('submitButton'); 
 
button.onclick=function(){ 
 
    
 
    this.src="http://placehold.it/200x50"; 
 
    }

<input type="image" src="http://placehold.it/100x50" id="submitButton" alt="Submit">