値が変更された場合、ブートストラップのボタンサイズ（幅*高さ）を同じにするにはどうすればよいですか？

Question

私の目標は、ボタンテキストをスピナーまたはdivに変更することですが、値が変わるたびにボタンのサイズも変更されます。ボタンを固定するにはどうしたらいいですか？

$(function() { 
 

 
    var opts = { 
 
    lines: 9 // The number of lines to draw 
 
     , 
 
    length: 2 // The length of each line 
 
     , 
 
    width: 2 // The line thickness 
 
     , 
 
    radius: 10 // The radius of the inner circle 
 
     , 
 
    scale: 1 // Scales overall size of the spinner 
 
     , 
 
    corners: 1 // Corner roundness (0..1) 
 
     , 
 
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors 
 
     , 
 
    opacity: 0.25 // Opacity of the lines 
 
     , 
 
    rotate: 0 // The rotation offset 
 
     , 
 
    direction: 1 // 1: clockwise, -1: counterclockwise 
 
     , 
 
    speed: 1 // Rounds per second 
 
     , 
 
    trail: 60 // Afterglow percentage 
 
     , 
 
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS 
 
     , 
 
    zIndex: 2e9 // The z-index (defaults to 2000000000) 
 
     , 
 
    className: 'spinner' // The CSS class to assign to the spinner 
 
     , 
 
    top: '50%' // Top position relative to parent 
 
     , 
 
    left: '50%' // Left position relative to parent 
 
     , 
 
    shadow: false // Whether to render a shadow 
 
     , 
 
    hwaccel: false // Whether to use hardware acceleration 
 
     , 
 
    position: 'absolute' // Element positioning 
 
    } 
 

 
    $("#apply").on("click", function() { 
 
    $("#apply").html(new Spinner(opts).spin().el); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Enter something"> 
 
    <span class="input-group-btn"> 
 
    <button class="btn btn-success" id="apply" type="button">Apply</button> 
 
    </span> 
 
</div>

フィドルリンク：それはスピナーで交換された後、ボタンにはテキストコンテンツが存在しないためhttps://jsfiddle.net/dq9b2xcw/1/

Answer 1

[戻る]ボタンの状態をトグルするつもりなら、私は要素内のテキストを折り返すと、視覚的にボタンに（代わりに$.html()を使用する）、その後$.append()スピナーコードのいずれかをopacityを使用して、それを隠すか、でしょうテキストからスピナーとバックに移動し、スピナーの要素を追加し、その要素にスピナーを追加します。

例を示します。より良いですが、それは、ボタンのサイズを維持しません

$(function() { 
 

 
    var opts = { 
 
    lines: 9 // The number of lines to draw 
 
     , 
 
    length: 2 // The length of each line 
 
     , 
 
    width: 2 // The line thickness 
 
     , 
 
    radius: 10 // The radius of the inner circle 
 
     , 
 
    scale: 1 // Scales overall size of the spinner 
 
     , 
 
    corners: 1 // Corner roundness (0..1) 
 
     , 
 
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors 
 
     , 
 
    opacity: 0.25 // Opacity of the lines 
 
     , 
 
    rotate: 0 // The rotation offset 
 
     , 
 
    direction: 1 // 1: clockwise, -1: counterclockwise 
 
     , 
 
    speed: 1 // Rounds per second 
 
     , 
 
    trail: 60 // Afterglow percentage 
 
     , 
 
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS 
 
     , 
 
    zIndex: 2e9 // The z-index (defaults to 2000000000) 
 
     , 
 
    className: 'spinner' // The CSS class to assign to the spinner 
 
     , 
 
    top: '50%' // Top position relative to parent 
 
     , 
 
    left: '50%' // Left position relative to parent 
 
     , 
 
    shadow: false // Whether to render a shadow 
 
     , 
 
    hwaccel: false // Whether to use hardware acceleration 
 
     , 
 
    position: 'absolute' // Element positioning 
 
    } 
 

 
    $("#apply").on("click", function() { 
 
    $("#apply").find('.text').addClass('invisible').end().find('.spinner').append(new Spinner(opts).spin().el); 
 
    }); 
 
});

.invisible { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Enter something"> 
 
    <span class="input-group-btn"> 
 
       <button class="btn btn-success" id="apply" type="button"><span class="text">Apply</span><span class="spinner"></span></button> 
 
    </span> 
 
</div>

Answer 2

ボタンが崩壊しています。ボタンに見えない文字を追加してみてください、それがこのケースでは、トリックを行いますかどうかを確認：あなたは、あまりにも幅を維持する直前にそれを保存したい場合は、単一の行のテキストの高さを維持する

$("#apply").html(new Spinner(opts).spin().el).append(' '); 

HTMLをスワップアウトします。

var buttonWidth = $('#apply').css('width'); 
// ... swap html 
$("#apply").css('width', buttonWidth); 

一貫性を持たせたい場合は、同じことを高さにも適用できます。