jQuery - 单击时在数组中前后循环。

Question

我希望能够在多个数组中前后循环，我只能让它向前循环，但不能向后循环。

这就是我目前所处的位置。 (您会注意到向下箭头按钮不起作用)

欢迎任何见解!

JS Fiddle

HTML

<div class="container">
<button class="btn-down">v</button>
    CUSTOM HOURS
<button class="btn-up">^</button>
<p class="price-select">1200</p>
<p class="hours-select">3</p>
<p class="photos-select">200-400+</p>
<p class="postproduction-select">15</p>
</div>
<div class="weekend-notice">Note: Weekend bookings available at a minimum of 5 hours.</div>

jQuery

//FOR CUSTOM HOURS BUTTON
var price = ["1400", "1600", "1800", "2000", "2200", "1200"];
var hours = ["4", "5", "6", "7", "10", "3"];
var photos = ["400-600+", "600-800+", "800-1000+", "1000-1200+", "1200-1400+", "200-400+"];
var editing = ["17", "19", "22", "25", "30", "15"];

var i = 0;
$(".btn-up").on('click', function() {
$(".price-select").hide().html(price[i]).fadeIn(300);
$(".hours-select").hide().html(hours[i]).fadeIn(300);
$(".photos-select").hide().html(photos[i]).fadeIn(300);
$(".postproduction-select").hide().html(editing[i]).fadeIn(300);
  i++;
  i = i % 6;

var checkHours = parseInt($('.hours-select').text());
var weekendNotice = $('.weekend-notice');
var hoursNotice = $('.morehours-notice');

if(checkHours <= 4){
    weekendNotice.fadeIn(500);
}else{
    weekendNotice.fadeOut(500);
};

});

Answer 1

可以在一行中计算“向上”和“向下”操作的索引，并且通过首先设置 1 和 -1 的数据值可以使编码变得更容易 上/下按钮。

通过脚本初始化也是比在 HTML 中硬编码更好的做法。

//FOR CUSTOM HOURS BUTTON
var price = ["1400", "1600", "1800", "2000", "2200", "1200"];
var hours = ["4", "5", "6", "7", "10", "3"];
var photos = ["400-600+", "600-800+", "800-1000+", "1000-1200+", "1200-1400+", "200-400+"];
var editing = ["17", "19", "22", "25", "30", "15"];

var i = 0,
    n = hours.length; // 6

$(".btn-up").data('dir', 1);
$(".btn-down").data('dir', -1);

$(".btn-up, .btn-down").on('click', function() {
    // ***** this line handles both directions *****
    i = (i + $(this).data('dir') + n) % n;
    // ***** ********************************* *****
    $(".price-select").hide().html(price[i]).fadeIn(300);
    $(".hours-select").hide().html(hours[i]).fadeIn(300);
    $(".photos-select").hide().html(photos[i]).fadeIn(300);
    $(".postproduction-select").hide().html(editing[i]).fadeIn(300);
    if(parseInt(hours[i]) <= 4) {
        $('.weekend-notice').fadeIn(500);
    } else {
        $('.weekend-notice').fadeOut(500);
    };
});

$(".btn-down").trigger('click'); //initialize

<强> DEMO