我希望它根据一天横向滚动

Question

我的这个脚本有问题，我想让它根据一天横向滚动，我该怎么办？

   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 );}

Answer 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>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 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());