Я бы хотел, чтобы он прокручивался в сторону в зависимости от дня

#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 повторяется в течение двух дней. Если вам нужны эти индексы, это еще одна проблема.