jquery要素のスリップを防ぐためにフォーム要素を隠す/表示する

select入力から特定の要素が選択されたときに、次のコードを使用していくつかのフォームを表示します。jquery要素のスリップを防ぐためにフォーム要素を隠す/表示する

のjavascript：

1）：すべての私は2つの質問を持っているすべてで
<div class="row"> 
    <div class="col-md-4"> 
    <div class="form-group"> 
     <select class="form-control" id="test-url" size="5"> 
     <option selected value="0">Generate new address</option> 
     <option value="1">Receive callback</option> 
     <option></option> 
     </select> 
    </div> 
    </div> 

    <div class="col-md-8"> 
    <form id="test-form"> 
     <div class="form-group" data-url="/api/receive?method=create"> 
     <input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key"> 
     </div> 
     <div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs"> 
     <input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL"> 
     </div> 
     <div class="form-group"> 
     <button type="submit" class="btn-info btn-lg">Send Request</button> 
     </div> 
    </form> 
    </div> 
</div> 
：
$(document).ready(function() { 

$("#callback_url").hide(); 
$("#test-url").on("change keyup paste", function(){ 
    //console.log($("#test-url").val()); 

    //generate address 
    if ($("#test-url").val() == 0) { 
     console.log("true"); 

     $("#callback_url").hide(); 
     $("#api_key").show(); 
    } 

    //payload 
    else{ 
     console.log("else"); 

     $("#api_key").hide(); 
     $("#callback_url").show(); 

    } 

}) 

}); 
私のHTMLコードは、この（ブートストラップを使用した）ように見えますページが読み込まれると、要素を隠す準備ができたドキュメントの上部にJavaScriptを使用するのは良いスタイルですか？そうでない場合、代わりに何を使用するのですか？

2）私は、ページをロードするとクリックしたときに、それは

のように見える最初の時間が今、「コールバックを受け取る」それは次のようになります。これが原因とされてどのように

、そしてどのように私は防ぐことができます選択された要素を変更するときに入力フォームが「滑り落ちる」ようにしますか？

出典

2017-01-03 wichtel

1）を使用すると、ページが読み込まれるのを待ちます。つまり、HTMLの読み込みとレンダリングが完了すると、その関数内のjavascriptコードが実行されます。これは、JSコードからHTML要素を操作する場合に便利です。 $(document).readyを使用して、すべてのスクリプトライブラリを<head>に配置し、まだレンダリングされていない未定義の要素がないことを確認することをお勧めします。

2）ブートストラップ3.3.7で正確なコードを使用しましたが、正常に動作しているようですので、ここにはHTMLやCSSの部分に問題があると思います。自分自身を参照してください：

$(document).ready(function() { 
 

 
$("#callback_url").hide(); 
 
$("#test-url").on("change keyup paste", function(){ 
 
    //console.log($("#test-url").val()); 
 

 
    //generate address 
 
    if ($("#test-url").val() == 0) { 
 
     console.log("true"); 
 

 
     $("#callback_url").hide(); 
 
     $("#api_key").show(); 
 
    } 
 

 
    //payload 
 
    else{ 
 
     console.log("else"); 
 

 
     $("#api_key").hide(); 
 
     $("#callback_url").show(); 
 

 
    } 
 

 
}) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
 

 

 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="form-group"> 
 
     <select class="form-control" id="test-url" size="5"> 
 
     <option selected value="0">Generate new address</option> 
 
     <option value="1">Receive callback</option> 
 
     <option></option> 
 
     </select> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-md-8"> 
 
    <form id="test-form"> 
 
     <div class="form-group" data-url="/api/receive?method=create"> 
 
     <input type="text" id="api_key" class="form-control" name="api_key" placeholder="API-Key"> 
 
     </div> 
 
     <div class="form-group test-specific-inputs" data-url="/api/receive?method=check_logs"> 
 
     <input type="text" id="callback_url" class="form-control" name="callback_url" placeholder="Callback URL"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button type="submit" class="btn-info btn-lg">Send Request</button> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</div>

乾杯

出典

2017-01-03 15:19:47

jquery要素のスリップを防ぐためにフォーム要素を隠す/表示する

答えて

関連する問題