Question

我希望段落中显示的文字会根据日期而变化。这是一个酒店的网站，其价格是基于季节的，我发现在主要价格部分列出每个季节的价格非常俗气。这是我目前的代码，我无法摆弄它，让它做我想做的事情：

＆＃13;

$(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();
  });
});

＆＃13;

.DateRange,
.DateDiv {
  display: none;
}

＆＃13;

<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>

＆＃13;

这适用于我想要的基本结果，因为它显示了我在该费率期间所需的价格，但我必须每年手动更改代码...如果有人知道如何设置它起来所以我不必这样做，那将是伟大的。

Answer 1

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

$(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();
  });
});

这是小提琴：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函数操作文本的位置。

Answer 2

我的答案很晚，但因为我写了一些东西，我也会发布。

＆＃13;

$(document).on('ready', function() {
  function displayPrice() {
    var r = [
      {left: {m: 3, d: 1}, right: {m: 5, d: 14}, price: 89},
      {left: {m: 5, d: 15}, right: {m: 9, d: 14}, price: 129},
      {left: {m: 9, d: 15}, right: {m: 12, d: 1}, price: 89},
      {left: {m: 12, d: 1}, right: {m: 2, d: 28}, price: 49}
    ];
    var dtNow = new Date(),
        dtY = dtNow.getFullYear(),
        dtM = dtNow.getMonth() + 1,
        dtFrom,
        dtTo,
        $elem = $('.DateDiv'),
        lY = dtY,
        rY = dtY;
    
    for (var i = 0; i < r.length; i++) {
      lY = dtY;
      rY = dtY;
      if (r[i].left.m > r[i].right.m) {
          if (dtM < r[i].left.m) {
            lY--;
          } else {
            rY++;
          }
        }
      dtFrom = new Date(lY, r[i].left.m - 1, r[i].left.d);
      dtTo = new Date(rY, r[i].right.m - 1, r[i].right.d);
      if (dtNow >= dtFrom && dtNow <= dtTo) {
        $elem.html('<span class="DateRange">'
                   + r[i].left.m + '/' + r[i].left.d + '/' + lY
                   + ' to '
                   + r[i].right.m + '/' + r[i].right.d + '/' + rY
                   + '</span> $' + r[i].price);
        break;
      }
    }
  }
  
  displayPrice();
  
});

＆＃13;

<div class="DateDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

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

2 个答案: