我正在为彩弹射击队制作网站。在主页上有一小部分显示下一个事件的日期。
这是相关的 HTML 代码:
<aside class="aside-dates">
<h1>PROCHAIN TOURNOI</h1>
<h2 id="h2date">MIPL E4</h2>
<h3 id="h3date">20 juillet 2013</h3>
<h4 id="h4date">Mirabel, QC</h4>
<div class="fleche gauche"></div>
<div class="fleche droite"></div>
</aside>
我使用 javascript 创建了一个小函数,当用户单击向左或向右箭头时更改不同 header 的内容。这里的目标是让用户看到即将发生的事件并可以回到以前的日期。
当我点击向右箭头一次时,日期会改变,但如果我再次点击向右箭头,日期将停留在第二个日期。但是,如果我单击左箭头,它将返回到第一个日期。我可以在第一个和第二个日期之间来回倒退,但是从第二个日期到第三个日期似乎不会记录附加值。
我知道一定有更好的方法来做到这一点,但我迷路了,我还需要添加其他日期。
这是 JS:
var numero_date = 0;
function clickDate(){
if ( $(this).hasClass("gauche") ){
numero_date--;
if (numero_date <= 0){
alert(numero_date);
document.getElementById("h2date").innerHTML = "MIPL E4";
document.getElementById("h3date").innerHTML = "20 juillet 2013";
document.getElementById("h4date").innerHTML = "Mirabel, QC";
numero_date = 0;
}
else if(numero_date = 1){
alert(numero_date);
document.getElementById("h2date").innerHTML = "PSP";
document.getElementById("h3date").innerHTML = "16-18 août 2013";
document.getElementById("h4date").innerHTML = "Riverside, CA";
}
else if(numero_date = 2){
alert(numero_date);
document.getElementById("h2date").innerHTML = "MIPL Finales";
document.getElementById("h3date").innerHTML = "31 août 2013";
document.getElementById("h4date").innerHTML = "Mirabel, QC";
}
}
else{
numero_date++;
if (numero_date <= 0){
alert(numero_date);
document.getElementById("h2date").innerHTML = "MIPL E4";
document.getElementById("h3date").innerHTML = "20 juillet 2013";
document.getElementById("h4date").innerHTML = "Mirabel, QC";
}
else if(numero_date = 1){
alert(numero_date);
document.getElementById("h2date").innerHTML = "PSP";
document.getElementById("h3date").innerHTML = "16-18 août 2013";
document.getElementById("h4date").innerHTML = "Riverside, CA";
}
else if(numero_date = 2){
alert(numero_date);
document.getElementById("h2date").innerHTML = "MIPL Finales";
document.getElementById("h3date").innerHTML = "31 août 2013";
document.getElementById("h4date").innerHTML = "Mirabel, QC";
}
}
}
谢谢!
最佳答案
问题在于您使用赋值运算符 =
而不是比较运算符 ==
。
修改类似下面的行
else if (numero_date = 2) {
到
else if (numero_date == 2) {
每当它越过 numero_date = 1
(此处用于比较 numero_date == 1
)时,该变量的值将设置为 1,它永远不会从那里改变它总是在if条件下设置为1,永不前进
我不清楚你的要求,但不是检查值,递增/递减计数器,你可以使用像 push 这样的数组函数, pop , shift , unshift像这样管理下一个/上一个按钮和数据循环:
var arrEvents = []; //Set up the array of events
arrEvents.push({
'event': 'MIPL E4',
'date': '20 juillet 2013',
'venue': 'Mirabel, QC'
},{
'event': 'PSP',
'date': '16-18 août 2013',
'venue': 'Riverside, CA'
},{
'event': 'MIPL Finales',
'date': '31 août 2013',
'venue': 'Mirabel, QC'
});
function clickDate() {
var obj;
if ($(this).is(".gauche")) {
obj = arrQuestions.shift(); //get the element from top
arrQuestions.push(obj); //push it to the end
obj = arrQuestions[0];
} else {
obj = arrQuestions.pop(); //get the element from end
arrQuestions.unshift(obj); //ush it to the top
obj = arrQuestions[arrQuestions.length-1];
}
console.log(JSON.stringify(arrQuestions));
document.getElementById("h2date").innerHTML = obj.event;
document.getElementById("h3date").innerHTML = obj.date;
document.getElementById("h4date").innerHTML = obj.venue;
}
关于单击 div 时 JavaScript 变量未正确添加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17518648/