javascript - 无法弄清楚如何根据日期自动显示文本内容

Question

我希望在段落中显示根据日期更改的文本。这是一个酒店网站，价格根据季节而定，我发现在主要价格部分列出每个季节的价格非常俗气。这是我当前的代码，我无法摆弄它来执行我想要的操作:

$(function() {
  $(".DateDiv").each(function(index) {
    var sRange = $(this).find(".DateRange").html();
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();
    if (dtNow >= dtFrom && dtNow <= dtTo)
      $(this).show();
  });
});

.DateRange,
.DateDiv {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="DateDiv"><span class="DateRange">3/1/2016 to 5/14/2016</span>$89</div>
<div class="DateDiv"><span class="DateRange">5/15/2016 to 9/14/2016</span>$129</div>
<div class="DateDiv"><span class="DateRange">9/15/2016 to 12/1/2016</span>$89</div>
<div class="DateDiv"><span class="DateRange">12/1/2016 to 2/28/2017</span>$49</div>

这是我想要的基本结果，因为它显示了我在该费率期间所需的价格，尽管我必须每年手动更改代码...如果有人知道如何设置这样我就不必这样做了，那就太好了。

Answer 1

您可以先设置 DateRange 元素的日期，然后再计算有效汇率。我所做的是用一串字符 #### 代表今年， XXXX 代表明年。然后在将它们设置在 DateRange 元素内之前，在 Javascript 中使用全局字符串替换方法。

$(function() {
  var dates = ['3/1/#### to 5/14/####','5/15/#### to 9/14/####', '9/15/#### to 12/1/####','12/1/#### to 2/28/XXXX'];
  var d = new Date();
  var thisYear = d.getFullYear();
  var nextYear = d.getFullYear() + 1;

  $('.DateRange').each(function(index){
    var datesInd = dates[index];
    datesInd = datesInd.replace(/####/g,thisYear);
    datesInd = datesInd.replace(/XXXX/g,nextYear);
    $(this).eq(index).text(datesInd);
  });

  $(".DateDiv").each(function(index) {
    var sRange = $(this).find(".DateRange").html();
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();
    if (dtNow >= dtFrom && dtNow <= dtTo)
      $(this).show();
  });
});

简化方法

我将之前的代码放在这篇文章中，以便您更容易将其可视化。您应该将代码最小化为一个循环。

$(function() {
  var dates = ['3/1/#### to 5/14/####','5/15/#### to 9/14/####', '9/15/#### to 12/1/####','12/1/#### to 2/28/XXXX'];
  var d = new Date();
  var thisYear = d.getFullYear();
  var nextYear = d.getFullYear() + 1;

  $(".DateDiv").each(function(index) {  
    var datesInd = dates[index];
    datesInd = datesInd.replace(/####/g,thisYear);
    datesInd = datesInd.replace(/XXXX/g,nextYear);
    $('DateRange').eq(index).text(datesInd);

    var sRange = $(this).find(".DateRange").html();
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();
    if (dtNow >= dtFrom && dtNow <= dtTo)
      $(this).show();
  });
});

这是 fiddle :https://jsfiddle.net/te75gwm4/1/

根据您的评论，您还需要在网页的其他部分显示此金额。只需获取美元金额并将其发送到另一个更新特定 .dollar-amount 类的函数。在需要此美元金额的任何地方添加此 dollar-amount 类。

$(function() {
  var dates = ['3/1/#### to 5/14/####','5/15/#### to 9/14/####', '9/15/#### to 12/1/####','12/1/#### to 2/28/XXXX'];
  var d = new Date();
  var thisYear = d.getFullYear();
  var nextYear = d.getFullYear() + 1;

  $(".DateDiv").each(function(index) {  
    var datesInd = dates[index];
    datesInd = datesInd.replace(/####/g,thisYear);
    datesInd = datesInd.replace(/XXXX/g,nextYear);
    $('DateRange').eq(index).text(datesInd);

    var sRange = $(this).find(".DateRange").html();
    var arrTemp = sRange.split(" to ");
    var dtFrom = new Date(arrTemp[0]);
    var dtTo = new Date(arrTemp[1]);
    var dtNow = new Date();
    if (dtNow >= dtFrom && dtNow <= dtTo){
      $(this).show();
      var requiredText = $(this).text();
      requiredText = '$' + requiredText.split('$')[1];
      inputEverywhere(requiredText);
    }
  });

  function inputEverywhere(dollarAmount){
    $('.dollar-amount').each(function(index){
        $(this).text(dollarAmount);
    });
  }

});

https://jsfiddle.net/te75gwm4/2/

请注意我在何处使用 split 函数处理了文本。