点击事件的价值增量无法在第一次工作

Question

我目前正在为每日时间表创建一个选项，我有一个next和prev按钮。但是，当用户第一次点击第二天时，第一天的增量没有增加（点击）。如果我有错误的代码，请通知我。感谢

这是小提琴https://jsfiddle.net/5s9ca60d/1/

代码

$(function () {
    var newday = 0;
    $(".mobileday_selection_prev").click(function () {
        var dataday = $(".mobileday_selection_day").data("day");
        newday -= dataday;
        if (newday <= 0) {
            newday = 7;
            switchselectionday(newday);
        } else {
            switchselectionday(newday);
        }

    });
    $(".mobileday_selection_next").click(function () {
        var dataday = $(".mobileday_selection_day").data("day");
        newday += dataday;
        if (newday >= 8) {
            newday = 1;
            switchselectionday(newday);
        } else {
            switchselectionday(newday);
            console.log(newday);
        }

    });
    function switchselectionday(dataday) {
        switch (dataday) {
            case 1:
                $(".mobileday_selection_day").attr("data-day", "1");
                $(".mobileday_selection_day").text("Monday");
                break;
            case 2:
                $(".mobileday_selection_day").attr("data-day", "2");
                $(".mobileday_selection_day").text("Tuesday");
                break;
            case 3:
                $(".mobileday_selection_day").attr("data-day", "3");
                $(".mobileday_selection_day").text("Wednesday");
                break;
            case 4:
                $(".mobileday_selection_day").attr("data-day", "4");
                $(".mobileday_selection_day").text("Thursday");
                break;
            case 5:
                $(".mobileday_selection_day").attr("data-day", "5");
                $(".mobileday_selection_day").text("Friday");
                break;
            case 6:
                $(".mobileday_selection_day").attr("data-day", "6");
                $(".mobileday_selection_day").text("Saturday");
                break;
            case 7:
                $(".mobileday_selection_day").attr("data-day", "7");
                $(".mobileday_selection_day").text("Sunday");
                break;
        }
    }

});

Answer 1

您可以使用

$(function () {
  var newday = 1;                                          //<<<<<<<<<< edited
  $(".mobileday_selection_prev").click(function () {
    var dataday = $(".mobileday_selection_day").data("day");
    --newday;                                              //<<<<<<<<<< edited
    if (newday <= 0) {
      newday = 7;
      switchselectionday(newday);
    } else {
      switchselectionday(newday);
    }

  });
  $(".mobileday_selection_next").click(function () {
    var dataday = $(".mobileday_selection_day").data("day");
    ++newday;                                              //<<<<<<<<<< edited
    if (newday >= 8) {
      newday = 1;
      switchselectionday(newday);
    } else {
      switchselectionday(newday);
      console.log(newday);
    }

  });
  function switchselectionday(dataday) {
    switch (dataday) {
      case 1:
        $(".mobileday_selection_day").attr("data-day", "1");
        $(".mobileday_selection_day").text("Monday");
        break;
      case 2:
        $(".mobileday_selection_day").attr("data-day", "2");
        $(".mobileday_selection_day").text("Tuesday");
        break;
      case 3:
        $(".mobileday_selection_day").attr("data-day", "3");
        $(".mobileday_selection_day").text("Wednesday");
        break;
      case 4:
        $(".mobileday_selection_day").attr("data-day", "4");
        $(".mobileday_selection_day").text("Thursday");
        break;
      case 5:
        $(".mobileday_selection_day").attr("data-day", "5");
        $(".mobileday_selection_day").text("Friday");
        break;
      case 6:
        $(".mobileday_selection_day").attr("data-day", "6");
        $(".mobileday_selection_day").text("Saturday");
        break;
      case 7:
        $(".mobileday_selection_day").attr("data-day", "7");
        $(".mobileday_selection_day").text("Sunday");
        break;
    }
  }
});

.mobileday_selection_prev {
    background-image: url('/Images/onfm/new/mobileday_prev.png');
    background-position: right 19px center;
    background-size: 22px;
    background-repeat: no-repeat;
    height: 55px;
    width: 55px;
    display: inline-block;
    background-color: #54c6dd;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: top;
}
.mobileday_selection_next{
    background-image: url('/Images/onfm/new/mobileday_next.png');
    background-position: left 19px center;
    background-size: 22px;
    background-repeat: no-repeat;
    height: 55px;
    width: 55px;
    display: inline-block;
    background-color: #e8a327;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: top;
}
.mobileday_selection_day{
    font-family: 'Montserrat';
    font-size: 16px;
    color: #000;
    display: inline-block;
    vertical-align: top;
    width: 150px;
    text-align: center;
    line-height: 55px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileday_selection">
  <center>
    <div class="mobileday_selection_prev">prev</div>
    <div class="mobileday_selection_day" data-day="1" >Monday</div>
    <div class="mobileday_selection_next">next</div>
  </center>
</div>