jQuery -点击时通过数组前后循环.
jQuery -点击时通过数组前后循环.
提问于 2015-05-23 23:39:40
我希望能够在多个数组中前后循环，我只能让它向前循环，而不是向后循环。
这就是我目前所处的地方。(您会注意到向下箭头按钮不工作)
任何见解都将受到欢迎！
JS Fiddle
<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);
};
});回答 4
Stack Overflow用户
回答已采纳
发布于 2015-05-24 05:31:02
可以在一行中计算“向上”和“向下”动作的索引，通过在向上/向下按钮上第一次设置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演示
Stack Overflow用户
发布于 2015-05-23 23:48:16
$(".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);
};
});Stack Overflow用户
发布于 2015-05-23 23:59:42
从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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30418642
复制相关文章
相似问题
腾讯云开发者
