页面加载时停止javascript触发

Question

我使用<body onload="dis()">在身体上调用此函数onload

function dis(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
}

基本上，我想检查特定的输入框是否为空或未加载。 如果为空，则应显示newstore按钮。 如果没有，它应该显示更新按钮。 但是通过这种方式，它可以在页面加载时按我的意愿工作，但是当我在stname键入stname ，按钮会切换。 有什么对策？ 页面加载完成后，有没有办法停止JavaScript触发？

Answer 1

您需要做的是

$(window).on("load",function(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
})

Answer 2

在文档DOM准备就绪时进行检查，这很容易进行，因为您正在使用JQuery：

$(document).ready(function(){
    if($('#stname').val() == ""){
        $('#update').hide();
        $('#newstore').show();
    }
    else {
        $('#update').show();
        $('#newstore').hide();
    }
});

Answer 3

此外，要设置页面加载的可见性，必须在更改字段内容时更改它。 您可以在此字段上使用“更改”事件，例如

var field = $("#stname");

field.on("change", function() {
    $("#update").toggle(field.val() === "");
    $("#newstore").toggle(field.val() !== "");
});

toggle（）和hide（）和show（）一起工作，它们都使用一个布尔参数来显示（true）或hide（false）。

Answer 4

您可以使用DOM indeand of body load。 在文档“就绪”之前，无法安全地操纵页面。 jQuery为您检测到这种就绪状态。 $（document）.ready（）内包含的代码仅在页面Document Object Model（DOM）准备好执行JavaScript代码后才能运行。 一旦整个页面（图像或iframe）（不仅是DOM）准备就绪，$（window）.load（function（）{...}）中包含的代码将运行。

$( document ).ready(function() {
   $('#update').show();
   $('#newstore').hide();

  // run this if field empty
  if($('#stname').val() == ""){
      $('#update').hide();
      $('#newstore').show();
  }

}）;

有关更多https://learn.jquery.com/using-jquery-core/document-ready/

Answer 5

为您提供替代解决方案，您可能没有考虑过：可以在CSS中使用相邻的兄弟和属性选择器以及negation伪类 ，而无需使用任何JavaScript，并假设input元素与button元素具有相同的直接父级。 ，或它们的父元素，如下所示：

#stname[value=""]~[#parent ]#update,#stname:not([value=""])~[#parent ]#newstore{
    display:none;
}