如何创建允许用户向前浏览用户最近输入的数据的按钮? [英] How do I create a button that allows a user to traverse forward through recent data input by the user?

问题描述

我想有3个按钮，

1. 添加条目按钮-此按钮创建一个新输入"框，以添加到先前创建的输入框中.

1. Add Entry Button - This button creates a New Input box, to add onto previously created input boxes.

编辑上一个"按钮-创建新输入"框后，该按钮允许用户按顺序编辑先前输入到该框中的数据.

Edit Previous Button - After creating the New Input box, this button allows the user to edit data previously input into the box, in sequence.

编辑下一个按钮-这是我需要的帮助，在使用按钮#2之后，用户无法移至下一个条目.唯一的选择是使用按钮#1添加另一个输入.我需要用户能够前进到下一个条目，而不是创建新的textPot.

Edit Next Button - This is where I need help, after using Button #2, the user can not move to the next entry. The only option is to add another Input using Button #1. I need the user to be able to move forward to the next entry, not create a new textPot.

如何在jquery中制作Button#3?

How do I make Button #3 in jquery?

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input>')
    .attr({
      'type': 'text',
      'placeholder': 'Entry_' + inputCount,
      'data-id': inputCount
    })
    .appendTo($('#box'));
}

function editPreviousEntry() {
  var cId = $('#box > input:visible').data('id');

  if (cId - 1 !== 0) {
    $('#box > input').hide();
    $('#box > input:nth-child(' + (cId - 1) + ')').show();
  }
  $('#box > input:nth-child(' + inputCount + ')').hide();
}

input {
  display: block;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit" onclick="editPreviousEntry()">Edit Previous Entry</button>
<button id="edit" onclick="editNextEntry()">Edit NExt Entry</button>
<br/>

<br/><span id="box"></span>
<br/>

推荐答案

这应该有效.

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input>')
    .attr({
      'type': 'text',
      'placeholder': 'Entry_' + inputCount,
      'data-id': inputCount
    })
    .appendTo($('#box'));
}

function editPreviousEntry() {
  var cId = $('#box > input:visible').data('id');

  if (cId - 1 !== 0) {
    $('#box > input').hide();
    $('#box > input:nth-child(' + (cId - 1) + ')').show();
  }
  $('#box > input:nth-child(' + inputCount + ')').hide();
}

function editNextEntry() {
    var cId = $('#box > input:visible').data('id');

    if (cId + 1 <= inputCount) {
        $('#box > input').hide();
        $('#box > input:nth-child(' + (cId + 1) + ')').show();
    }
}

input {
  display: block;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit" onclick="editPreviousEntry()">Edit Previous Entry</button>
<button id="edit" onclick="editNextEntry()">Edit NExt Entry</button>
<br/>

<br/><span id="box"></span>
<br/>

这篇关于如何创建允许用户向前浏览用户最近输入的数据的按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！