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%，第三个按钮应该得到类active。

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

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

我创建了jsfiddle here，

Answer 1

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

重点不要为每个链接绑定单个事件。这是通用的 - 使用jQuery index()找到链接的索引，然后将其与100相乘。

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

由于我的原始代码已经略显臃肿/大，我想我可以使用以下解决方案：

var weekday = new Date().getDay();

if (weekday === 0) {
    $(".calendar").css({left: "-700%"});
} else if (weekday === 1) {
    $(".calendar").css({left: 0});
} else if (weekday === 2) {
    $(".calendar").css({left: "-100%"});
} else if (weekday === 3) {
    $(".calendar").css({left: "-200%"});
} else if (weekday === 4) {
    $(".calendar").css({left: "-300%"});
} else if (weekday === 5) {
    $(".calendar").css({left: "-400%"});
} else if (weekday === 6) {
    $(".calendar").css({left: "-500%"});
} else {
    $(".calendar").css({left: 0});
}

它做了应有的事情，可能有更有效的方法来遍历列表，但现在它可以工作！

根据工作日编号

2 个答案: