【问题标题】:jQuery previous button when clicked goes back to Q.) 1 rather then going backward one by onejQuery 上一个按钮单击时返回 Q.) 1 而不是一个一个后退
【发布时间】:2017-06-20 13:51:57
【问题描述】:

jQuery 上一个按钮无法按预期工作。
基本上最好的解释方法是,如果我在第 5 题中并单击上一个按钮,则默认为第 1 题而不是第 4 题。

所以它默认为问题 1...这是一个问题。
怎么办?

jQuery 在脚本标签的底部。

  if (i.Question_Type == "DROPDOWN")
  {
    <div class="container text-center">

      <div class="row idrow" data-questions="@counter">
        @{
          counter++;
        }

        <div id="question1" class="form-group">
          <label class="lab text-center" for="form-group-select">
            @i.Question_Order @Html.Raw(@i.Question)
          </label>
          <select class="form-control" id="form-group-select">
            @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
            {
              var t = x - 1;
              if (i.qOps != null)
              {
                <option> @i.qOps.options[t]</option>
              }
              else
              {
                <option> @x</option>
              }
            }
          </select>
        </div>
      </div>
    </div>
  }

  if (i.Question_Type == "RADIO")
  {

    <div class="container">
      <div class="row idrow" data-questions="@counter">
        @{counter++;
        }
        <div class="form-group">
          <label class="lab" for="questions">
            @i.Question_Order @i.Question
          </label>
          <div class="row">
            <div class="col-xs-12">
              <div id="question1" class="radio-inline">
                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                {
                  var t = x - 1;
                  if (i.qOps != null)
                  {
                  <label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
                  }
                  else
                  {
                  <label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>
                  }
                }
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  }
  if (i.Question_Type == "CHECKBOX")
  {
    for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
    {
      @*<div class="container">
      <div class="row">

        <label>@y</label>   <input type="checkbox" name="question">

      </div>
      </div>*@
    }
  }
}
<div class="azibsButtons">
  <button type="button" id="previous"  class="btn btn-primary pull-left">Prev</button>

  <button type="button" id="next"  class="btn btn-primary pull-right">Next</button>
</div>


<script>
$(document).ready(function () {
  $(".idrow").each(function (i) {

    var inner = $(this).data('questions');
    if (inner == 0) {

      $(this).removeClass('hidden');
    } else {
      $(this).addClass('hidden');

    }
  });
  $("#next").click(function () {

    $(".idrow").each(function (i) {

      var inp = $(this);
      if (!inp.hasClass('hidden')) {
        var dataVal = inp.data("questions");
        dataVal++;
        inp.addClass('hidden');

        $('[data-questions=' + dataVal + ']').removeClass('hidden');

        return false;

      }
    });

    $("#previous").click(function () {

      $(".idrow").each(function (i) {

        var inp = $(this);
        if (!inp.hasClass('hidden')) {
          var dataVal = inp.data("questions");
          dataVal--;
          inp.addClass('hidden');

          $('[data-questions=' + dataVal + ']').removeClass('hidden');

          return false;

        }
      });
    });
  });
});
</script>

【问题讨论】:

  • 能否请您也发布您的html?
  • 好的,我现在就做
  • 上一个点击事件在下一个点击事件里面有什么原因吗?
  • 据我所知,它不在下一次点击事件中
  • 从您的代码中,显然是......这意味着上一个事件只有在下一个事件被触发后才可用,并且每次都被覆盖。

标签: javascript jquery html button


【解决方案1】:

大家好,感谢 Daniel,我得到了解决方案。

下一个事件右括号被前一个事件包裹,这导致问题在单击上一个时默认为问题1。

$("#next").click(function () {

  $(".idrow").each(function (i) {

    var inp = $(this);
    if (!inp.hasClass('hidden')) {
      var dataVal = inp.data("questions");
      dataVal++;
      inp.addClass('hidden');

      $('[data-questions=' + dataVal + ']').removeClass('hidden');

      return false;
    }
  });
});

$("#previous").click(function () {

  $(".idrow").each(function (i) {

    var inp = $(this);
    if (!inp.hasClass('hidden')) {
      var dataVal = inp.data("questions");
      dataVal--;
      inp.addClass('hidden');

      $('[data-questions=' + dataVal + ']').removeClass('hidden');

      return false;
    }
  });
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-07-15
    • 1970-01-01
    • 2017-10-07
    • 1970-01-01
    • 1970-01-01
    • 2020-05-29
    • 1970-01-01
    • 2020-01-20
    相关资源
    最近更新 更多