Question

再次感谢大家提前审核并在此论坛上给予的帮助。我会尽量保持我的要求。

简单地说，我有工作.js代码，允许我在webapp中保存变量。 “按钮”当前是一个文本链接，用于启动保存过程，但我需要使用某个glyphicon而不是文本链接（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">

使用Glyphicon按钮代替TEXT链接

1 个答案: