jquery - 按钮隐藏/显示 GET 日期参数

Question

我有一个网站，我在画廊中显示 25 个按钮。我只想隐藏这些按钮。如果 URL 中传递的日期超过 1,2,3 ... 25 天按钮可见。例如传递的 URL 为：mayurl.com/?fd=8-9-2019 (MDY)

Button 1 = visible
Button 2 = hidden and visible  8-10-2019
Button 3 = hidden and visible 8-11-2019
...
...
...
Button 25 = Hidden and visible 9-3-2019

这可以在jQuery中完成吗？我对此完全陌生，请帮忙。

感谢感谢

标签： jquery

Answer 1

在下面的代码中，url 中的日期是“8-9-2019”。今天，“2019 年 8 月 20 日”，距离“2019 年 8 月 9 日”已经过去了 11 天，因此显示了 11 个按钮。明天，“2019 年 8 月 21 日”，距离“2019 年 8 月 9 日”已经过去 12 天，因此将显示 12 个按钮。这是你的意思吗？

// Define dateInUrl. It is hardcoded in this example. Change 'new Date("8-9-2019")' to 'getUrlParameter("fd")' when using the code on your real website
var dateInUrl = new Date("8-9-2019");
// Define hours,minutes,seconds and milliseconds in a day
var oneDay = 24*60*60*1000;
// Define today's date
var currentDate = new Date();
// Get number of days between date in URL and today's date from function diffDays
var nDays = diffDays(dateInUrl, currentDate);

// Loop through all buttons
$(':button').each(function () {
  // If the button's id is larger than the number of days between date in URL and today's date...
  if (this.id > nDays) {
    // ...hide it!
    $(this).hide();
  }
});

// Function for calculating days between two dates
function diffDays(d1, d2) {
  var ndays;
  var tv1 = d1.getTime();
  var tv2 = d2.getTime();

  ndays = (tv2 - tv1) / 1000 / 86400;
  ndays = Math.round(ndays - 0.5);
  return ndays;
}

// Function for getting parameter from URL
var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
  sURLVariables = sPageURL.split('&'),
  sParameterName,
  i;

  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
      return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Button 1:
  <button type="button" id="1">Button</button>
</div>
<div>
  Button 2:
  <button type="button" id="2">Button</button>
</div>
<div>
  Button 3:
  <button type="button" id="3">Button</button>
</div>
<div>
  Button 4:
  <button type="button" id="4">Button</button>
</div>
<div>
  Button 5:
  <button type="button" id="5">Button</button>
</div>
<div>
  Button 6:
  <button type="button" id="6">Button</button>
</div>
<div>
  Button 7:
  <button type="button" id="7">Button</button>
</div>
<div>
  Button 8:
  <button type="button" id="8">Button</button>
</div>
<div>
  Button 9:
  <button type="button" id="9">Button</button>
</div>
<div>
  Button 10:
  <button type="button" id="10">Button</button>
</div>
<div>
  Button 11:
  <button type="button" id="11">Button</button>
</div>
<div>
  Button 12:
  <button type="button" id="12">Button</button>
</div>
<div>
  Button 13:
  <button type="button" id="13">Button</button>
</div>
<div>
  Button 14:
  <button type="button" id="14">Button</button>
</div>
<div>
  Button 15:
  <button type="button" id="15">Button</button>
</div>
<div>
  Button 16:
  <button type="button" id="16">Button</button>
</div>
<div>
  Button 17:
  <button type="button" id="17">Button</button>
</div>
<div>
  Button 18:
  <button type="button" id="18">Button</button>
</div>
<div>
  Button 19:
  <button type="button" id="19">Button</button>
</div>
<div>
  Button 20:
  <button type="button" id="20">Button</button>
</div>
<div>
  Button 21:
  <button type="button" id="21">Button</button>
</div>
<div>
  Button 22:
  <button type="button" id="22">Button</button>
</div>
<div>
  Button 23:
  <button type="button" id="23">Button</button>
</div>
<div>
  Button 24:
  <button type="button" id="24">Button</button>
</div>
<div>
  Button 25:
  <button type="button" id="25">Button</button>
</div>