页面刷新后淡入div

时间:2016-04-20 18:39:20

标签: javascript jquery html css

我有以下代码:

function getValues(){
    var heat =  document.forms["toolSection"]["heatingType"].value;
    var meter = document.forms["toolSection"]["meterType"].value;
    var beds = document.forms["toolSection"]["noBedrooms"].value;
    var property = document.forms["toolSection"]["houseType"].value;
    var age = document.forms["toolSection"]["houseAge"].value;

    if (heat === null || heat=== ""){
      alert ("Please select your heating type.");
      return false;
    }
    if(meter === null || meter=== ""){
      alert ("Please select your meter type.");
      return false;
    }
    if(beds === null || beds === ""){
      alert ("Please select the number of bedrooms.");
      return false;
    }
    if(property === null || property === ""){
      alert ("Please select your property type.");
      return false;
    }
    if(age === null || age === ""){
      alert ("Please select the age of your property.");
      return false;
    } else {
      alert("Calculating a typical consumption value for you.");
      setTimeout(function () { 
        window.location.reload();
        }, 10);
      return true;
    }
  }

它基本上检查我的任何表单元素是否为空,然后是否显示警告,警告用户确保选择了某些内容。最初我有一个问题,当我点击提交时,我无法看到计算值,直到我刷新表单,因此setTimeout(function () {代码。现在我只是想知道是否可以在setTimeout函数之后加载div?

显示隐藏div的代码:

$(document).ready(function(e) {
    $("#btn-calcCon").on('click', function() {
     $("#conContainer").fadeIn();
   });
  });

谢谢!

1 个答案:

答案 0 :(得分:1)

现在我只是想知道是否可以在setTimeout函数之后加载div? - 不,你不能。

这是因为该页面将重新加载。但是,您可以通过设置某些内容来加载重新加载页面的脚本中的div,就像@isherwood所述的变量或参数一样。

解决方案:

function getValues() {
  var heat = document.forms["toolSection"]["heatingType"].value;
  var meter = document.forms["toolSection"]["meterType"].value;
  var beds = document.forms["toolSection"]["noBedrooms"].value;
  var property = document.forms["toolSection"]["houseType"].value;
  var age = document.forms["toolSection"]["houseAge"].value;

  if (heat === null || heat === "") {
    alert("Please select your heating type.");
    return false;
  }
  if (meter === null || meter === "") {
    alert("Please select your meter type.");
    return false;
  }
  if (beds === null || beds === "") {
    alert("Please select the number of bedrooms.");
    return false;
  }
  if (property === null || property === "") {
    alert("Please select your property type.");
    return false;
  }
  if (age === null || age === "") {
    alert("Please select the age of your property.");
    return false;
  } else {
    alert("Calculating a typical consumption value for you.");
    setTimeout(function() {
      // set a hash
      window.location.hash = "trigger_here";
      window.location.reload();
    }, 10);
    return true;
  }
}

// check if there is ANY hash
if (window.location.hash) {
  // remove the hash
  window.location.hash = "";
  // load your div using code here
  $("#conContainer").fadeIn();
}

这将在网址上设置哈希,例如http://yourwebsite.com/example.html#trigger_here。你可以检查它是否在url中有哈希值,然后加载你的div。如果有的话。