jquery - 根据星期几设置 scrollLeft

Question

我想知道如何根据星期几设置 .scrollLeft()。

我发现我可以使用 Date().getdate() 获取星期几。星期日返回 0，星期六返回 6。

但是，我正在制定一个水平滚动的时间表。时间表位于 700% 宽度的 div 中。星期一从 left: 0 开始。如果用户在星期二单击，则 div 向右滚动 100% 以显示星期二。到目前为止一切正常，尽管我的 jQuery 可能更直接一些(目前我使用 eq(0)、eq(1)、eq(2) 等)。

$(document).ready(function () {
    $(".daypick li a").eq(0).on("click", function (event) {
        event.preventDefault();
        $(".calendar").css({left: 0});
    });
    $(".daypick li a").eq(1).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-100%"}); 
    });
    $(".daypick li a").eq(2).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-200%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
    $(".daypick li a").eq(3).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-300%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
    $(".daypick li a").eq(4).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-400%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
    $(".daypick li a").eq(5).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-500%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
    $(".daypick li a").eq(6).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-600%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
    $(".daypick li a").eq(7).on("click", function (event) {
        event.preventDefault(); //Prevent default action of anchor
        $(".calendar").css({left: "-700%"}); //Animates the scroll
    /* Can also use 3000, 4000 i.e 3 seconds, 4 seconds to animate the scroll */
    });
});

我在这里试图实现的是脚本检查今天是哪一天并显示当天的日程安排。所以在星期三，父 div 应该得到 left: -300%，第三个按钮应该得到 class active。

但是我对日期有点迷茫。我的第一个想法是获取工作日数并将其乘以 100 以获得 left 值。问题是周日返回 0，在我的例子中，我需要周一返回 0 才能正常工作。

希望有人能提供一些帮助。

我创建了一个 jsfiddle here ,

Answer 1

您可以使用 (currentDay + 6) % 7 获取基于星期一的日期。

要点 不要为每个链接绑定(bind)单独的事件。通用 - 使用 jQuery 查找链接的索引 index()然后将它乘以 100。

$(document).ready(function () {
  var links = $(".daypick li a").on("click", function (event) {
    event.preventDefault();
    var index = links.index(this);
    $(".calendar").css({left: -(index*100) + '%'});
  });

  setTimeout(function(){
    var currentDay = new Date().getDay();
    links.eq((currentDay + 6) % 7).trigger('click');
  });
});

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.daypick {
  list-style: none;
  text-align: center;
  padding-top: 15px;
}

.daypick li {
  display: inline-block;
}

.daypick li a {
  padding: 10px 20px;
  background: #3ab3b6;
  color: #fff;
  text-decoration: none;

  transition: all .3s;
}

.daypick li a:hover, .daypick li a.active {
  background: #268a8d;
}

.calendar-wrapper {
  width: 100%;
  overflow-x:scroll;
}

.calendar {
  width: 700%;
  height: auto;
  overflow-x: scroll;
  position: relative;
  transition: all 2s;
  left: 0;
}

.weekday {
  padding-top: 50px;
  width: calc(100% / 7);
  float: left;
}

.raumwrap {
  max-width: 50%;
  float: left;
}

.raum1, .raum2 {
  margin-top: 30px;
  float: left;
  max-width:100%;
  margin-right: 75px;
}

.raum1 td, .raum2 td {
  padding: 10px 5px; 
}

.raum1 tr:nth-child(2n) {
  background: #3ab3b6;
  color: #fff;
}

.raum1 tr:nth-child(2n+1) {
  background: #fff;
}

.raum2 tr:nth-child(2n) {
  background: #268a8d;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <ul class="daypick">
      <li><a href="#" class="active">Montag</a></li>
      <li><a href="#">Dienstag</a></li>
      <li><a href="#">Mittwoch</a></li>
      <li><a href="#">Donnerstag</a></li>
      <li><a href="#">Freitag</a></li>
      <li><a href="#">Samstag</a></li>
      <li><a href="#">Sonntag</a></li>
    </ul>
    <div class="calendar-wrapper">
      <main class="calendar">
        <div class="weekday">
          <h1>Montag:</h1>

          <div class="raumwrap">
            <h2>Raum 1</h2>
            <table class="raum1">
              <tbody>
                <tr>
                  <th>Zeit</th>
                  <th></th>
                  <th>Kurse</th>
                  <th></th>
                  <th>Therapeut</th>
                </tr>
                <tr>
                  <td>07:00 - 08:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>08:00 - 09:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>15:00 - 16:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>17:00 - 18:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>19:00 - 20:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
              </tbody>
            </table>
          </div>
          <div class="raumwrap">
            <h2>Raum 2</h2>
            <table class="raum2">
              <tbody>
                <tr>
                  <th>Zeit</th>
                  <th></th>
                  <th>Kurse</th>
                  <th></th>
                  <th>Therapeut</th>
                </tr>
                <tr>
                  <td>07:00 - 08:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>08:00 - 09:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>15:00 - 16:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>17:00 - 18:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
                <tr>
                  <td>19:00 - 20:00</td>
                  <td width="50"></td>
                  <td>Krankengymnastiek</td> 
                  <td width="50"></td>
                  <td>John Doe</td> 
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="weekday">
          <h1>Dienstag:</h1>
        </div>
        <div class="weekday">
          <h1>Mittwoch:</h1>
        </div>
        <div class="weekday">
          <h1>Donnerstag:</h1>
        </div>
        <div class="weekday">
          <h1>Freitag:</h1>
        </div>
        <div class="weekday">
          <h1>Samstag:</h1>
        </div>
        <div class="weekday">
          <h1>Sonntag:</h1>
        </div>
      </main>
    </div>
  </div>
</div>

https://jsfiddle.net/9fgwoxpm/1/