Question

我目前有一个表格，其中有2个datePicker（Jquery UI）。在第一个，当我＆＃34; mouseenter＆＃34;一个约会，我做一个AJAX调用来获得响应（并且它有效）。这里的问题是AJAX调用适用于datePicker。我只想要第一个！这是HTML：

while read line; do
   if [ `echo $line | cut -d "|" -f 9` != " " ]; then
      echo $line > $line 
   else
      touch "Blank file"
   fi
done < yourfile.txt

事实上，它非常基础。现在，这里是JS：

<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Next relaunch</label>
    <div class="col-md-6 col-sm-6 col-xs-12" id ="nextLaunchDate">
        <input name="nextLaunchDate" class="datePicker form-control col-md-7 col-xs-12" title="Next relaunch">
    </div>
</div>
<div class="item form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Validity date</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
         <input name="validityDate" class="datePicker form-control col-md-7 col-xs-12" title="Validity date">
    </div>
</div>

我理解为什么ajax调用适用于两个datePicker，但我不能理解我如何只为第二个调用。如果您对此有任何疑问，请不要犹豫，发表评论！另外，如果您对我的代码有任何注意事项，请告诉我！ :) 祝你有个美好的一天！

编辑：这是一个代码显示我的问题：https://codepen.io/anon/pen/aLmpbN

Answer 1

由于jQuery对两个输入都使用相同的日期选择器组件，因此您应该使用ids添加条件检查。请参阅以下示例，其中两个日期选择器在mouseover时具有不同的操作。

var datePicker = "";

//First date picker
$("#first_date").datepicker({
  beforeShow: function() {
    datePicker = "FIRST_DATE";
  },
  onClose: function() {
    datePicker = "";
  }
});

//Second date picker
$("#second_date").datepicker({
  beforeShow: function() {
    datePicker = "SECOND_DATE";
  },
  onClose: function() {
    datePicker = "";
  }
});

//Add conditional mouse hover events

$("body").on("mouseenter", ".ui-state-default", function() {
  if (datePicker == "FIRST_DATE") {
    //Do first date picker stuff
    console.log("on first date picker");
  } else {
    //Do second date picker stuff
    console.log("on second date picker");
  }


});

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  </script>
</head>

<body>

  <p>First Date:
    <input type="text" id="first_date">
  </p>

  <p>Second Date:
    <input type="text" id="second_date">
  </p>


</body>

</html>

您应该使用ids而不是使用类名来表示不同的日期输入。

Answer 2

嗯... 没有答案。这只是你的选择。！：）

<input type="text" id="first_date" class="datePicker" data-type="test1">
<input type="text" id="second_date" class="datePicker" data-type="test2">

$(".datePicker").datepicker({
    showWeek: true,
    dateFormat: "dd-mm-yy"
});

$("body").on("mouseenter", ".datePicker", function(e) {
    var type = $(this).data('type');

    if (type == 'test1') {

    } else {
        // test2
    }
}

Answer 3

通过班级名称提供活动。

HTML

<div>
    <label class="control-label col-md-3">Next relaunch</label>
        <input name="nextLaunchDate" class="datePicker form-control col-md-7" title="Next relaunch">
</div>
<div>
    <label class="control-label col-md-3">Validity date</label>
         <input name="validityDate" class="datePicker2 form-control col-md-7" title="Validity date">
</div>

JS

$(".datePicker").datepicker({
    showWeek: true,
    dateFormat: "dd-mm-yy"
});

$(".datePicker2").datepicker({
    showWeek: false,
    dateFormat: "yy-mm-dd"
});

否则，您可以通过JQuery基于类名分配事件。

好日子〜

Answer 4

你错过了“＆lt;”在第二个标签。并在您的函数中使用当前输入，而不是“body”

几个DatePicker上的不同操作

4 个答案: