Question

功能卡应该返回某场音乐会的卡片。但是，只有在音乐会的日期与使用日期选择器功能选择的日期相匹配时。因此，如果我选择日期06/22/2018，我应该看到音乐会卡，因为日期是相同的。但是现在它没有用，因为这行：

if(document.getElementById("datepicker").value == this.date)

正在选择顶部输入的值，这是未定义的，因此它不会显示任何内容。所以我想我首先要调用函数datepicker（），但我不知道该怎么做。

以下是我使用的代码：

<input type="text" id="datepicker"/></div>
<div id="corpo1"></div>


$(function() 
{
   $("#datepicker").datepicker({
      showOn: "button",
      buttonText: "Select date",
      buttonImage: "https://i.imgur.com/cvkNy5G.png"
   });
});


function Concert(id, name, date, price)
{
   this.id = id;
   this.name = name;
   this.date = date;
   this.price = price;

   this.card = function()
    {
       if(document.getElementById("datepicker").value == this.date)
       return "<span class='concert'>"+this.name+" "+this.date+"</span>";

    }
}

var concerti = [ new Concert(1,"The Fame Ball","06/22/2018",50) ];

function showcard(f)
{
        var ris = "";
        for(var i in concerti) 
        {
            ris+=concerti[i].card();
        }
        document.getElementById('corpo1').innerHTML=ris;
}

任何可以提供帮助的人？

Answer 1

问题我认为您的showcard代码没有运行，至少在正确的时间没有运行。将以下内容添加到Javascript中可以解决问题。

$("#datepicker").change(showcard);

当文本框的文本发生变化时，当用户选择新日期时，将导致showcard函数运行。如果您没有选择Concert的日期，那么您可能遇到的“未定义”问题是因为如果日期不匹配，showcard函数不会返回任何内容（变为“undefined”）。您可以通过在函数末尾添加return "";来强制它返回空字符串并且不显示任何内容来解决此问题。

Answer 2

尝试此解决方案：http://jsfiddle.net/6gub2smo/2/ 关键变化如下：

$("#datepicker").datepicker({
  showOn: "button",
  buttonText: "Select date",
  buttonImage: "https://i.imgur.com/cvkNy5G.png",
  onSelect: showcard
});

jQuery UI建议使用onSelect事件。文档here。

允许您在选择日期选择器时定义自己的事件。该函数接收所选日期作为文本和日期选择器实例作为参数。这指的是相关的输入字段。

Javascript：比较if中的两个日期

2 个答案: