#jquery #date #scroll
Вопрос:
У меня проблема с этим сценарием, я бы хотел, чтобы он прокручивался в сторону в зависимости от дня, как я могу это сделать?
var d = new Date();
var weekday=new Array(7);
weekday[0]="lunedì";
weekday[1]="martedì";
weekday[2]="mercoledì";
weekday[3]="giovedì";
weekday[4]="venerdì";
weekday[5]="sabato";
weekday[6]="domenica";
if(d == weekday[1]) { $( ".table-responsive" ).scrollLeft( 300 );}
else if (d == weekday[1]) { $( ".table-responsive" ).scrollLeft( 300 );}
else if (d == weekday[2]) { $( ".table-responsive" ).scrollLeft( 450 );}
else if (d == weekday[3]) { $( ".table-responsive" ).scrollLeft( 600 );}
else if (d == weekday[4]) { $(".table-responsive" ).scrollLeft( 750 );}
else if (d == weekday[5]) { $(".table-responsive" ).scrollLeft( 900 );}
else if (d == weekday[6]) { $(".table-responsive" ).scrollLeft( 150 );}
Комментарии:
1. пожалуйста, добавьте свой полный код во фрагмент
2.
d
никогда не будет равна строке
Ответ №1:
Добро пожаловать в Stack Overflow. Возможно, вы захотите проверить getDay()
:
getDay()
Метод возвращает день недели для указанной даты в соответствии с местным временем, где0
соответствует воскресенью. На день месяца, смотритеDate.prototype.getDate()
.
Рассмотрим следующий пример.
$(function() {
var d = new Date();
console.log(d.toString(), "Day: " d.getDay());
var weekdays = [
"lunedì",
"martedì",
"mercoledì",
"giovedì",
"venerdì",
"sabato",
"domenica"
];
function toUpperFirst(str) {
return str.substring(0, 1).toUpperCase() str.substring(1);
}
$.each(weekdays, function(i, day) {
$("<th>").html(toUpperFirst(day)).appendTo($(".table-responsive thead tr").eq(0));
});
var view = $(".viewport");
switch (d.getDay()) {
case 0:
// Sunday / Domeniza
console.log("Scroll to Domeniza");
view.scrollLeft(900);
break;
case 1:
// Monday / Lunedi
console.log("Scroll to Lunedi");
view.scrollLeft(0);
break;
case 2:
// Tuesday / Martedi
console.log("Scroll to Martedi");
view.scrollLeft(150);
break;
case 3:
// Wednesday / Mercoledi
console.log("Scroll to Mercoledi");
view.scrollLeft(300);
break;
case 4:
// Thursday / Giovedi
console.log("Scroll to Giovedi");
view.scrollLeft(450);
break;
case 5:
// Friday / Venerdì
console.log("Scroll to Venerdi");
view.scrollLeft(600);
break;
case 6:
// Saturday / Sabato
console.log("Scroll to Sabato");
view.scrollLeft(750);
break;
}
view.scroll(function(event) {
console.log($(this).scrollLeft());
});
});
.viewport {
width: 150px;
overflow: auto;
}
.table-responsive {
table-layout: fixed;
width: 1050px
}
.table-responsive th {
width: 150px;
}
.table-responsive td {
height: 240px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<table class="table-responsive">
<thead>
<tr></tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>150</td>
<td>300</td>
<td>450</td>
<td>600</td>
<td>750</td>
<td>900</td>
<td>amp;nbsp;</td>
</tr>
</tbody>
</table>
</div>
Ответ №2:
Если вы действительно ожидаете, что d будет именем дня, вы можете использовать объект для поиска положения прокрутки.
По Имени:
const dayName = 'giovedì';
const positions = {
domenica: 150,
lunedì: 300,
martedì: 300,
mercoledì: 450,
giovedì: 600,
venerdì: 750,
sabato: 900
};
$( ".table-responsive" ).scrollLeft(positions[dayName]);
По Номеру
const dayNumber = 0;
const positions = [300, 300, 450, 600, 750, 900, 150];
$( ".table-responsive" ).scrollLeft(positions[dayNumber]);
Создайте функцию и используйте значение по умолчанию:
По имени или номеру
const positions = {
domenica: 150,
lunedì: 300,
martedì: 300,
mercoledì: 450,
giovedì: 600,
venerdì: 750,
sabato: 900
};
const positionsByNumber = Object.keys(positions).map(k => positions[k]);
const defaultPosition = positionsByNumber[0];
/**
* n name of weekday or number
*/
const setTablePosition = n => {
const position = (
positions[n] ||
positionsByNumber[n] ||
defaultPosition
);
$( ".table-responsive" ).scrollLeft(position);
return position;
}
Результаты:
setTablePosition('mercoledì'); // 450
setTablePosition('fubar'); // 300
setTablePosition(0); // 150
setTablePosition(12); // 300
// And by users clock
setTablePosition((new Date()).getDay());
Комментарии:
1. это мне кажется наиболее правильным, только как вы узнаете текущий день? потому что в зависимости от дня таблица должна прокручиваться, чтобы получить представление о дне.
2. Это зависит от тебя. Они нажимают на название дня; вы проверяете местное время? Вы можете увидеть комментарий о
(new Date()).getDay()
том, чтобы получить его по местному времени.3. Кроме того, @jacoposilvestri, названия дней и должности отключены. Воскресенье на самом деле является первым днем, и 300 повторяется в течение двух дней. Если вам нужны эти индексы, это еще одна проблема.