Question

我有一个简单的年龄计算器，可以计算用户注册时的年龄。如果年龄为18岁或以上，则结果字段中的文本为绿色，如果年龄小于18岁，则为红色。

一切正常，除了我希望计算完成后将结果字段设置为动画。在选择两个日期之前，结果元素都应处于可见状态。

我没有求和按钮，因为我不确定如何使它与datepicker实例一起使用。此外，我不知道在datepicker实例上触发模糊事件时，一切都在“幕后”运行。

相关的HTML（您将看到jQuery方法和HTML输入类型的日期方法，您可以忽略它）

<div class="jq">
<h1>With jQuery</h1>
<span> enter DOB</span>
<input type="text" id="date1"> // get sign date of birth

<span> enter sign up date</span>
<input type="text" id="date2"> // get sign up date
<span> Result</span>
<input type="text" id="calculated" class="outOfView">  // display result (date2.value - date1.value)
 </div>

相关CSS：

.red {   
color: red; 
transform: scale(5) rotate(360deg);
}
.green {
color: green;
}


.outOfView {
 transform: translateY(50px); // this is just a test value
  }

 .inView {
 transform: translateY(0);
 }

这很简单，我希望id =“ calculated”输入字段在最初以及每次初始化新计算时都不会出现（在这里，我不知道是选择datepicker对象的方法还是我自己的函数模糊或聚焦事件）。

一旦计算出日期差，或者id =“ calculated”输入字段不为空，我想通过添加类.inView将该元素动画化为视图。

这是JS：

$(function() {
$("#date1").datepicker({ // initializing first datepicker
showAnim: "clip",
changeMonth: true,

changeYear: true,

yearRange: "1930:2010"
});

$("#date1").datepicker({
onSelect: calcDiff, // onselect is a datepicker method, calcDiff is my own function

minDate: null,
maxDate: null
});

$("#date2").datepicker({ // initializing/configuring the second datepicker input field
changeMonth: true,

changeYear: true,

yearRange: "1930:2018",
showAnim: "slide",
onSelect: calcDiff,
onClose: move,   // onclose is a method of the datepicker object, move is my function where I want to toggle the inView / outOfView classes

minDate: null,
maxDate: null
});

function calcDiff() { // this is just the math, this works
var d1 = $("#date1").datepicker("getDate");

var d2 = $("#date2").datepicker("getDate");

var diff = 0;

if (d1 && d2) {
  diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
}

var years = Math.floor(diff / 365);

var days = Math.floor(diff % 365);

var months = Math.floor(days % 12);
      // here things get a bit complicated, but this still works
  if (years < 18) {
  $("#calculated").removeClass("green");

  $("#calculated").addClass("red");
  } else {
  $("#calculated").removeClass("red");

  $("#calculated").addClass("green");
  }

  $("#calculated").val("age was " + years + "y, " + " and " + days + "d");
   }
      // here is the problem, this does not work
  function move() {
  if ($("#calculated").val !=="") { // this if clause is likely the wrong approach
  $("#calculated").removeClass("outOfView");
  $("#calculated").addClass("inView");
  }
  else {
  $("#calculated").removeClass("inView");
  $("#calculated").addClass("outOfView");
  }

  }
  });

所有这些都可以在第一次尝试或刷新页面时起作用。

但是我希望通过在日期选择器输入字段之一中选择新日期时添加类.outOfView来使元素不可见。

或者，我希望在任一日期选择器上选择一个新日期后，id =“ calculated”的值==“。

我该如何实现这一目标，我希望我的意图和问题都清楚。

链接到Codepen：

https://codepen.io/damPop/pen/oayEdg?editors=1010

jQuery datepicker回调函数和模糊事件

0 个答案: