Question

我创建了3个文本框，例如

如果我点击一个按钮，我需要显示txtChoice_1，如果我第二次点击该按钮就会显示

txtChoice_2就像明智一样，我需要逐一显示这些文本框。

有什么想法吗？

Answer 1

不确定您的要求是什么，但这是一个JQuery解决方案：

<强> HTML

<div class="inputs">
    <input type="text" class="tb">
    <input type="text" class="tb">
    <input type="text" class="tb">
</div>
<input type="submit" class="clickMe">

<强> JQuery的

//Hide all of the text boxes on document ready
$(document).ready(function() {
    $.each($('.tb'), function() {
    $(this).hide();
  });
});

$('.clickMe').click(function() {
  //Find the first hidden text box
  var tb = $('.inputs').find('input:hidden').first();
  //Length will always be one if there is at least one hidden text box.
  if ($(tb).length == 1) { 
    $(tb).show();
  } 
  else {
    alert('No more');
    //You can extend this by hiding the text boxes once there are no more to show (or whatever else you want).
  }
});

Answer 2

你可以很容易地在JS中构建一个函数。如果你给你的按钮一个onclick事件到一个函数'showTextBoxes'，你可以逐个文本框。像这样的东西，它只是演示了如何展示一个盒子。你可以很容易地添加一个小循环和计数器来检查某人点击了多少时间，但我留给你的挑战是：）

$('.txtChoice_1').hide();
$('.txtChoice_2').hide();
$('.txtChoice_3').hide(); //You could further optimize this too

showTextBoxes = function () {
  //TODO: Add global variable so you can track the number of amounts clicked
  $('.txtChoice_1').show();
};

如何在按钮单击时逐个显示文本框

2 个答案: