javascript - 从循环中的文本数组分页 HTML textarea 内容

Question

我需要使用上一个和下一个或通过指定位置对数组进行分页，在索引发生变化时，必须显示与相应关联的值。

我试过下面的代码，但是我没能实现

我需要使用上一个和下一个或通过指定位置对数组进行分页，在索引发生变化时，必须显示与相应关联的值。

我试过下面的代码，但是我没能实现

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>

Answer 1

在您的change 函数中，您需要使用当前输入值 - 1 重新分配idx。

$("#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>