从月份数组中获取当前月份

Question

我有一个数组，基本上是这样的：

这个数组是动态的，假设它里面有以下月份：

"May","June"

也可以这样：

"May","June","July"...

我需要能够在当月的滑块中进行设置。我一直在这样做：

swiper.slideTo(new DateTime().getMonth()); // fetches current month index ( if May it is 5 since indexation goes from 0)

我的幻灯片是这样的：

<div class="swiper-wrapper">
    <div class="swiper-slide active"><h3>January</h3></div>
    <div class="swiper-slide active"><h3>February</h3></div>
    <div class="swiper-slide active"><h3>March</h3></div>
    <div class="swiper-slide active"><h3>April</h3></div>
    <div class="swiper-slide active"><h3>May</h3></div>
    <div class="swiper-slide active"><h3>June</h3></div>
    <div class="swiper-slide active"><h3>July</h3></div>
    <div class="swiper-slide active"><h3>August</h3></div>
    <div class="swiper-slide active"><h3>September</h3></div>
    <div class="swiper-slide active"><h3>October</h3></div>
    <div class="swiper-slide active"><h3>November</h3></div>
    <div class="swiper-slide active"><h3>December</h3></div>
</div>

滑动器中的索引也从 0 变为 11，因此很容易将当前幻灯片设置为当前月份。现在的问题是，如果数组不是从 1 月开始，我该如何设置当前月份，但我仍然能够将当前幻灯片设置为正确的月份...例如，如果幻灯片从 5 月到 7 月开始...如果当前月份是六月，我希望能够将当前幻灯片设置为六月...

我该怎么做？

Answer 1

我不确定 Javascript 是否具有将月份索引转换为字符串的开箱即用功能。但如果没有，最简单的方法是在一个变量中保留一个包含所有月份名称的固定数组，并找到当前月份的索引，这会产生当前月份的名称。然后，您可以将其与 slides 数组上的 .indexOf 一起使用，以获取要将滑块设置为的索引。

可能是这样的：

var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

function getSliderIndex(slides) {
    var currentMonthName = MONTHS[new Date().getMonth()];
    return slides.indexOf(currentMonthName)
}

Answer 2

使用 jQuery

会很容易

var search = "May";

var indexOfCurrentMonthSwiper;

var currentMonthSwiper = $(".swiper-slide").filter(function(i){
    if ($(this).find("h3").html() == search){
      indexOfCurrentMonthSwiper = i;
      return true;
    }
    return false;
});

console.log(currentMonthSwiper, indexOfCurrentMonthSwiper);

JSFiddle

Answer 3

如果你给每个 div 一些东西来标识月份（这可以是 CSS class、一个 ID、一个数据属性......）你可以遍历 DIVS 并选择你想要的那个。

下面是一个带有自定义数据属性的示例：

<div class="swiper-wrapper">
   <div class="swiper-slide active" data-month="0"><h3>January</h3></div>
   <div class="swiper-slide active" data-month="1"><h3>February</h3></div>
   ...
   <div class="swiper-slide active" data-month="11"><h3>December</h3></div>
</div>

JS:

var curr_month = new DateTime().getMonth();
$('.swiper-wrapper').children('div').each(function(i) {
    if($(this).data("month") === curr_month){
        swiper.slideTo(i);
    }
});

从月份数组中获取当前月份

Getting current month from array of months

arrays

jquery

date

swiper