代码之家 › 专栏 › 技术社区 › Code Guy

对循环中的文本数组中的HTML textarea内容进行分页

css html jquery javascript

Code Guy · 技术社区 · 6 年前

我已经尝试了下面的代码,但是我没有成功

我需要使用“上一页”和“下一页”或通过指定位置对数组进行分页,一旦索引发生更改,必须显示与相应索引关联的值。

我已经尝试了下面的代码,但是我没有成功

var resultBox = $('#result')
var messages = ["cat", "dog", "fish"];
var idx = $("#pageNumber").val();
var length = messages.length;

var getNextIdx = (idx = -1, length, direction) => {
    switch (direction) {
        case '1':
            {
                $("#pageNumber").val((idx + 1) % length + 1)
                return (idx + 1) % length;
            }
        case '-1':
            {
                $("#pageNumber").val(((idx == 0) && length - 1 || idx - 1) + 1);
                return (idx == 0) && length - 1 || idx - 1;

            }
        default:
            {
                return idx;
            }
    }

}

var getNewIndexAndRender = function(direction) {
    idx = getNextIdx(idx, length, direction);
    console.log(idx)
    $("#result").val(messages[idx])
}

$(document).ready(function() {
    $("#pageNumber").change(function() {
        getNewIndexAndRender()
    });
});

getNewIndexAndRender()
    $( "#prev" ).trigger( "click" );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="result"></textarea>
<input type="text" id="pageNumber" value="0"></input>
<button id="prev" onclick="getNewIndexAndRender('-1')">prev</button>
<button id="next" onclick="getNewIndexAndRender('1')">next</button>

1 回复 | 直到 6 年前

Andy Hoffman 6 年前

change 函数,您需要重新分配 idx 具有 the current input value - 1

$("#pageNumber").change(function() {
  idx = $(this).val() - 1;
  getNewIndexAndRender();
});

演示:

var resultBox = $('#result')
var messages = ["cat", "dog", "fish"];
var idx = $("#pageNumber").val();
var length = messages.length;

var getNextIdx = (idx = -1, length, direction) => {
  switch (direction) {
    case '1':
      {
        $("#pageNumber").val((idx + 1) % length + 1)
        return (idx + 1) % length;
      }
    case '-1':
      {
        $("#pageNumber").val(((idx == 0) && length - 1 || idx - 1) + 1);
        return (idx == 0) && length - 1 || idx - 1;

      }
    default:
      {
        return idx;
      }
  }

}

var getNewIndexAndRender = function(direction) {
  idx = getNextIdx(idx, length, direction);
  $("#result").val(messages[idx]);
}

$(document).ready(function() {
  $("#pageNumber").change(function() {
    idx = $(this).val() - 1;
    getNewIndexAndRender();
  });
});

getNewIndexAndRender()
$("#prev").trigger("click");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="result"></textarea>
<input type="text" id="pageNumber" value="0"></input>
<button id="prev" onclick="getNewIndexAndRender('-1')">prev</button>
<button id="next" onclick="getNewIndexAndRender('1')">next</button>