我正在为彩弹团队建立一个网站。在主页面上有一小部分用于显示下一个事件的日期。
这是相关的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我做了一个小功能,当用户点击左箭头或右箭头时,更改不同标题的内容。这里的目标是让用户看到即将发生的事件,并可以回到之前的日期。
当我单击右箭头一次时,日期会发生变化,但如果再次单击右箭头,则会保留第二个日期。但是,如果我单击左箭头,它将返回到第一个日期。我可以用第一个和第二个日期返回第四个,但是当它从第二个到第三个时它似乎不会记录附加值。
我知道必须有更好的方法来做到这一点,但我迷路了,我还需要添加其他日期。
这是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";
}
}
}
谢谢!
答案 0 :(得分:1)
问题在于您使用赋值运算符=
而不是比较运算符==
。
更改类似于以下的行
else if (numero_date = 2) {
到
else if (numero_date == 2) {
每当它越过numero_date = 1
(其中比较意图为numero_date == 1
)时,该变量的值设置为1,它永远不会从那里改变,它总是在if条件中将其设置为1并且从不移动前进
<强> Demo 强>
我不清楚你的请求但不是检查值,递增/递减计数器,你可以使用像push,pop,shift,{等数组函数{3}}管理next / prev按钮和数据循环,如下所示:
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;
}
<强> unshift 强>