Question

基本上对于我的javascript代码，我想要发生的是当用户点击箭头时，会出现另一个日期和div元素。因此，当用户单击右箭头时，将显示下一周，当用户单击左箭头时，将显示上一周。

每当用户右键单击时，都会显示下一周但前一周仍然可见。另一方面，每当用户离开点击时，前一周都没有显示，也没有任何反应。

如何制作，以便当用户点击箭头时，只显示一周，也就在当前显示的一周之前或之后？

下面是我的代码：

＆＃13;

//get week number
function getWeekNumber(d) {
    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
    return [d.getUTCFullYear(), weekNo];
}
var result = getWeekNumber(new Date());
var fin = result[1];

//div variables
var decThirtyfirst = document.getElementById('decThirtyfirst');
var janSeven = document.getElementById('janSeven');
var janFourteen = document.getElementById('janFourteen');
var janTwentyone = document.getElementById('janTwentyone');
var janTwentyeight = document.getElementById('janTwentyeight');

//div variables to array
var weekDivs = [decThirtyfirst, janSeven, janFourteen, janTwentyone, janTwentyeight];

//show current week
var displayDiv = weekDivs[fin - 1];
displayDiv.style.display = "block";


//show next week
function nextWeek() {
var d = new Date();

var x = 1;
var newFin = fin+= x;
//display div
var newDiv = weekDivs[newFin - 1];
newDiv.style.display = "block";
}

//WEEK BEFORE 
function prevWeek() {
var d = new Date();

var x = 1;
var lessFin = fin-= x;

//display div
var newDiv = weekDivs[lessFin - 1];
newDiv.style.display = "block";

}

＆＃13;

#decThirtyfirst, #janSeven, #janFourteen, #janTwentyone, #janTwentyeight{
display: none;
}
h1{
display: inline
}

＆＃13;

<input type="button" onclick="prevWeek()" class="arrow" value="&larr;"></input>
            &nbsp; 
            <input type="button" onclick="nextWeek()" class="arrow" value="&rarr;" id="rArrow"></input>

<div id="decThirtyfirst">12/31 to 1/6</div>
<div id="janSeven">1/7 to 1/13</div> 
<div id="janFourteen">1/14 to 1/20</div>
<div id="janTwentyone">1/21 to 1/27</div>
<div id="janTwentyeight">1/28 to 2/3</div>

＆＃13;

Answer 1

您可以做的是隐藏所有星期div，然后再显示您想要显示的新div。此外，我更正了prevWeek和nextWeek函数，以便当您尝试在第一个元素之前或数组中最后一个元素之后访问时，代码不会引发错误。

＆＃13;

//get week number
function getWeekNumber(d) {
    d = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay()||7));
    var yearStart = new Date(Date.UTC(d.getUTCFullYear(),0,1));
    var weekNo = Math.ceil(( ( (d - yearStart) / 86400000) + 1)/7);
    return [d.getUTCFullYear(), weekNo];
}
var result = getWeekNumber(new Date());
var fin = result[1];

//div variables
var decThirtyfirst = document.getElementById('decThirtyfirst');
var janSeven = document.getElementById('janSeven');
var janFourteen = document.getElementById('janFourteen');
var janTwentyone = document.getElementById('janTwentyone');
var janTwentyeight = document.getElementById('janTwentyeight');

//div variables to array
var weekDivs = [decThirtyfirst, janSeven, janFourteen, janTwentyone, janTwentyeight];

//show current week
var displayDiv = weekDivs[fin - 1];
displayDiv.style.display = "block";


//show next week
function nextWeek() {
  var d = new Date();

  var x = 1;
  
  //condition depends on your indexing (yours starts with 1)
  if(fin + x <= weekDivs.length){
    var newFin = fin+= x;
    
    //hide divs
    for(var key = 0; key < weekDivs.length; key++){
        weekDivs[key].style.display = "none";
    }
    
    //display div
    var newDiv = weekDivs[newFin - 1];
    newDiv.style.display = "block";
  }
}

//WEEK BEFORE 
function prevWeek() {
var d = new Date();

  var x = 1;
  
  //condition depends on your indexing (yours starts with 1)
  if(fin - x > 0){
    var lessFin = fin-= x;

    //hide divs
    for(var key = 0; key < weekDivs.length; key++){
        weekDivs[key].style.display = "none";
    }
    
    //display div
    var newDiv = weekDivs[lessFin - 1];
    newDiv.style.display = "block";
  }

}

＆＃13;

#decThirtyfirst, #janSeven, #janFourteen, #janTwentyone, #janTwentyeight{
display: none;
}
h1{
display: inline
}

＆＃13;

<input type="button" onclick="prevWeek()" class="arrow" value="&larr;"></input>
            &nbsp; 
            <input type="button" onclick="nextWeek()" class="arrow" value="&rarr;" id="rArrow"></input>

<div id="decThirtyfirst" class="dateDiv">12/31 to 1/6</div>
<div id="janSeven" class="dateDiv">1/7 to 1/13</div> 
<div id="janFourteen" class="dateDiv">1/14 to 1/20</div>
<div id="janTwentyone" class="dateDiv">1/21 to 1/27</div>
<div id="janTwentyeight" class="dateDiv">1/28 to 2/3</div>

＆＃13;

仅显示阵列onclick中的上一个，当前或下一个变量

1 个答案: