Question

基本上我尝试获取数据属性的值，当点击值为7,14,30，我尝试将它们插入到一些javascript日期代码，但它没有显示正确的日期？如果我自己输入值，它会提醒正确的日期但是当我使用一个保存其中一个数据属性的javascript变量时，我会得到远离实际日期的日期吗？

示例网站here

HTML

<form class="annonceForm" action="index.php?page=opretAuction" method="POST">
    <input type="text" name="" placeholder="Produkt">

    <div id="auctionExpireWrapper" class="auctionExpireWrapper">
        <span data-auctionExpire="7" class="auctionExpire">7 dage</span>
        <span data-auctionExpire="14" class="auctionExpire">14 dage</span>
        <span data-auctionExpire="30" class="auctionExpire">30 dage</span>
    </div>
    <input id="auctionStartDateInput" type="hidden">
    <input id="auctionEndDateInput" type="hidden">

    <textarea placeholder="Beskrivelse"></textarea>
           <!-- HIDDEN INPUT FELTER -->
           <input type="hidden" name="CSRFToken" value="<?php echo $_SESSION['CSRFToken']; ?>">
    <input type="hidden" name="OpretAuctionAuctioneer" value="<?php echo $_SESSION['username']; ?>"> 
</form>

的Javascript

document.getElementById("auctionExpireWrapper").addEventListener("click", function (e) {
var expireDate = e.target.getAttribute("data-auctionExpire");
alert(expireDate);
var today = new Date();

当我使用expireDate变量时，它会弄乱日期，如果我手动插入等14而没有变量一切正常吗？

today.setDate(today.getDate() + expireDate);
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();

if (dd < 10) {
    dd = '0' + dd
}
if (mm < 10) {
    mm = '0' + mm
}

today = yyyy + '-' + mm + '-' + dd;
alert(today);
});

有人可以向我解释为什么它会像这样吗？

Answer 1

发布答案而非进一步评论。 OP在评论中提出了以下问题：

dataset.auctionExpire有什么区别？为什么是小写的？

因为它是用这种方式定义的。如果您查看HTMLElement.dataset文档，则会找到

HTML中自定义数据属性的名称以data-开头。它必须只包含字母，数字和以下字符：短划线（ - ），点（。），冒号（:)，下划线（_） - 但不是任何ASCII大写字母（A到Z）

但是，在您的HTML中，您可以像在此处一样使用大写字母定义data-属性：

<span data-auctionExpire="7"

但在内部，它将存储为auctionexpire。后面的每个类似的命名属性都不会被添加。下面是一个小例子，我添加了多个数据属性。唯一的区别是一些字符是大写的：

document.getElementById('forTest').addEventListener('click', function() {
   console.log('this.dataset.auctionexp: ' +  this.dataset.auctionexp);
   console.log('this.dataset.auctionExp: ' +  this.dataset.auctionExp);
   console.log('this.dataset.auCTionexp: ' +  this.dataset.auCTionexp);
   console.log('this.dataset.AUCTIONEXP: ' +  this.dataset.AUCTIONEXP);
});

<span id="forTest" data-auctionExp="one uppercase" data-auCTionexp="CT as upper" data-AUCTIONEXP="FULL UPPER">clickme</span>

为了解决您的问题，我已经更换了第二行。但这不是唯一的问题。您从.dataset.auctionexpire检索的值的类型是string类型。当你在做什么

today.setDate(today.getDate() + expireDate)

你要添加一个带字符串值的整数

  today.getDate() // = 13, type Number (time of this post)
  expireDate      // =  7, type String(clicked on "7 tage")
+ ----------------------
  // result: 137

所以你用137天而不是20（13+7）设置新的一天。要修复它，只需使用new Number()将字符串转换为数字，就像我在下面所做的那样。

document.getElementById("auctionExpireWrapper").addEventListener("click", function(e) {
  var expireDate = e.target.dataset.auctionexpire;
  // expireDate is a string, not number. You have to cast it
  expireDate = new Number(expireDate);
  // should be correct now.
  
  console.log('expireDate: ' + expireDate);
  
  var today = new Date();
  today.setDate(today.getDate() + expireDate);
  
  var dd = today.getDate();
  var mm = today.getMonth() + 1; //January is 0!
  var yyyy = today.getFullYear();

  if (dd < 10) {
    dd = '0' + dd
  }
  if (mm < 10) {
    mm = '0' + mm
  }

  today = yyyy + '-' + mm + '-' + dd;
  console.log('today: ' + today);
});

<form class="annonceForm" action="index.php?page=opretAuction" method="POST">
  <input type="text" name="" placeholder="Produkt">

  <div id="auctionExpireWrapper" class="auctionExpireWrapper">
    <span data-auctionExpire="7" class="auctionExpire">7 dage</span>
    <span data-auctionExpire="14" class="auctionExpire">14 dage</span>
    <span data-auctionExpire="30" class="auctionExpire">30 dage</span>
  </div>
  <input id="auctionStartDateInput" type="hidden">
  <input id="auctionEndDateInput" type="hidden">

  <textarea placeholder="Beskrivelse"></textarea>
  <!-- HIDDEN INPUT FELTER -->
  <input type="hidden" name="CSRFToken" value="<?php echo $_SESSION['CSRFToken']; ?>">
  <input type="hidden" name="OpretAuctionAuctioneer" value="<?php echo $_SESSION['username']; ?>">
</form>

使用日期时出现奇怪的Javascript行为

1 个答案: