Question

我希望能够通过多个阵列向后和向前循环，我只能让它循环前进，但不能倒退。

这是我到目前为止的地方。（你会注意到向下箭头按钮不起作用）

欢迎任何见解！

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

Answer 2

$(".btn-down").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);
  if(i == 0) {
      i = 5
  } else {
      i--;
  }

  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 3

从index = -1开始，像这样迭代前进

i = (i+1) % (price.length); （我使用其中一个数组作为长度参考）

像这样

和落后

if (i <= 0) {
    i = price.length - 1;
} else {
    --i;
}

我认为放置它们非常重要。

var i = -1;
$(".btn-up").on('click', function () {
    i = (i+1) % (price.length);
    $(".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);

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

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

});
$(".btn-down").on('click', function () {
    if (i <= 0) {
        i = price.length - 1;
    } else {
        --i;
    }
    $(".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);

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

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

});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/4pbq4ddx/10/

Answer 4

尝试使用button选择器，单个click处理程序增量，根据i的{{1}}递减e.target

event

// 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 = price.length - 1;
$("button").on('click', function(e) {
  if ($(e.target).is(".btn-up")) {
    i = i === price.length - 1 ? 0 : ++i;
  } else {
    if ($(e.target).is(".btn-down")) {
      i = i > 0 ? --i : price.length - 1;
    };
  };
  $(".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);

  var checkHours = parseInt($('.hours-select').text());
  var weekendNotice = $('.weekend-notice');
  var hoursNotice = $('.morehours-notice');

  if (checkHours <= 4) {
    weekendNotice.fadeIn(500);
  } else {
    weekendNotice.fadeOut(500);
  };

});

p {
  display: block;
}

jsfiddle http://jsfiddle.net/4pbq4ddx/14/

jQuery - 在点击时循环向后和向前循环。

4 个答案: