根据工作日数设置scrollLeft

debugcn 发表于 Dev

劳伦斯1991

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

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

但是，我正在制定水平滚动的时间表。时间表以700%宽度为单位。星期一开始于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%，第三个按钮应该获得上课active。

但是，我对日期有些困惑。我的第一个想法是将工作日的数字乘以100以获得left值。问题是星期日返回0，而在我的情况下，我需要星期一返回0才能正常运行。

希望有人可以提供一些帮助。

我在这里创建了一个jsfiddle，

莫什·费

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

要点不要为每个链接绑定单独的事件。做到通用-使用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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。