日付に基づいて表示されるテキストコンテンツを自動的に表示する方法を見つけることができません

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

私はそれが簡単にあなたがそれを視覚化できるようにするために、この記事で前にコードを置きます。コードを1つのループに最小化する必要があります。ここで

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

私は答えが遅いですが、私が何かを書いたので私もそれを投稿します。

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

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