Question

我在jquery中迭代对象时遇到了一些麻烦。我相信在js文件的第25行，holidays.date没有选择我打算选择的内容。也就是说，对于可变假期中的每个对象，检查是否有任何日期是今天的日期。如果不是运行附加，否则运行通用追加。

如何修复该选择器（holidays.date）以查看今天的日期？

谢谢大家。

＆＃13;

$(document).ready(function() {

   var today = new Date(),
      month = today.getMonth(),
      months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'),
      date = today.getDate(),
      monthDay = months[month] + ' ' + date;

   var suHours = "We're Closed Today.",
      mHours = "9:00am to 5:00pm",
      tHours = "8:00am to 3:00pm",
      wHours = "9:00am to 5:00pm",
      thHours = "9:00am to 5:00pm",
      fHours = "9:00am to 7:00pm",
      sHours = "9:00am to 2:00pm";
   
   var holidays = [
         {date: 'May 10', hours: '8:00am to 12:00pm', message: 'Tuesday\'s Message - Merry Christmas!'}, 
         {date: 'May 11', hours: '9:00am to 1:00pm', message: 'Wednesday\'s Message - Happy New Years!'},
         {date: 'May 12', hours: '10:00am to 2:00pm', message: 'Thursday\'s Message - Happy Thanksgiving!'}, 
      ],
      generic = "Open Right Now!";

   function todayHoliday() {
      if ( monthDay == holidays.date ) {
         $.each( $(holidays), function() {
            $('.today-holiday-hours em').append(this.hours);
            $('.today-holiday-message em').append(this.message);
         });
      } else {
         $('.today-holiday-hours em').append('Generic Hours');
         $('.today-holiday-message em').append('Generic Message');
      }
   }
   todayHoliday();

});

＆＃13;

*, body, html {
   font-family: "Arial", sans-serif;
   font-size: 15;
   margin: 0;
   padding: 0;
}

body {
   margin: 20px;
}

h1, section {
   margin: 20px 0;
}

h3 {
   color: #aaa;
}

section p em {
   color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>HoursJS Holiday Version</title>
   <link rel="stylesheet" href="style.css">

</head>
<body>
   <h1 id="title">HoursJS Plugin Holiday Version v: 0.0.1</h1>

   <hr>

<!-- Today is Holiday Hours & Message -->
   <section>
      <h3>Today is a Holiday:</h3>
      <p class="today-holiday-hours"><em></em></p>
      <p class="today-holiday-message"><em></em></p>
   </section>

</body>
</html>

＆＃13;

Answer 1

要使用$，您无需“选择”假期，只需执行以下操作：

.each

选择器（var matchFound = false; $.each(holidays, function() { if ( monthDay == this.date ) { matchFound = true; $('.today-holiday-hours em').append(this.hours); $('.today-holiday-message em').append(this.message); } }); if (!matchFound) { $('.today-holiday-hours em').append('Generic Hours'); $('.today-holiday-message em').append('Generic Message'); }）用于选择DOM中的元素。在这种情况下，您已经有了一个数组，因此您可以迭代它。

编辑：我更新了函数，将if语句放在循环中，我认为这是所需的行为。我还根据所需行为的注释将$(something)语句移到了循环之外

Answer 2

试试这个：

var isHoliday = false;

$.each( $(holidays), function() {
     if ( monthDay == this.date ) 
    { 
        $('.today-holiday-hours em').append(this.hours); 
        $('.today-holiday-message em').append(this.message); });
        isHoliday = true;
    }
} 

if (!isHoliday )
{ 
    $('.today-holiday-hours em').append('Generic Hours');
    $('.today-holiday-message em').append('Generic Message'); 
}

Answer 3

我认为你可以使用grep函数

var xyz = $.grep(holidays, function (n) {
             return n.date === monthDay;
          });

jQuery对象迭代

3 个答案: