Question

当从选择输入中选择某个元素时，我使用以下代码显示某些形式。

javascript：

$(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代码看起来像这样（使用bootstrap）：

<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>

总而言之，我有两个问题：

1。）当页面加载时，在文档顶部使用javascript准备好隐藏元素是不是很好？如果没有，用什么而不是？

2。）当我第一次看到
时加载页面
现在点击＆＃34;接收回拨＆＃34;看起来像：

这是如何引起的，以及如何防止输入表格出现＆＃34; slip＆＃34;改变所选元素时，像它一样？

Answer 1

1）使用$(document).ready等待页面加载，这意味着HTML完成加载和渲染后，该函数内的javascript代码将运行。当您使用JS代码中的HTML元素时，这非常有用。我建议使用$(document).ready来确保您可以将所有脚本库放在<head>中，并且知道不会有未定义元素的机会。< / p>

2）我在bootstrap 3.3.7中使用了你的确切代码，它似乎运行正常，所以我认为你的HTML或CSS的部分存在问题，你没有在这里包含。亲眼看看：

＆＃13;

$(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();

    }

})

});

＆＃13;

<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>

＆＃13;

干杯

jquery隐藏/显示表单元素，防止元素滑动

1 个答案: