jquery 使div标签在页面加载时不可见,并在单击按钮时显示多个div标签

ekqde3dh  于 2023-02-18  发布在  jQuery
关注(0)|答案(2)|浏览(154)

我想让一个div标签在页面加载时不可见,而在每次点击按钮时可见。这是我的页面:

<div id="realProp1">
    <input name="FirstName[0]" class="form-control" />
</div>

 <div id="realProp2">
    <input name="FirstName[1]" class="form-control" />
</div>

 <div id="realProp3">
    <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

每当单击“添加项目”按钮时,我希望显示一个Div标签/项目,因此如果单击“添加项目”按钮,我希望仅显示div标签“realProp 1”,现在如果再次单击“添加项目”按钮,我希望显示“realProp 2”div标签。下面是我所拥有的,代码适用于一个div标签,但不适用于多个div标签:

<script>
         window.onload = function () {
              
                document.getElementById("realProp1").style.display = 'none';
                document.getElementById("realProp2").style.display = 'none';

document.getElementById("realProp3").style.display = 'none';
                
            };

 function Additem() {
                document.getElementById("realProp1").style.display = "";
            };

 </script>

我怎样才能使一个div标签在每次按钮点击时可见。

rjee0c15

rjee0c151#

您可以使用:eq()比较要显示哪个div,并保存一些变量来保存最后一个计数值,或者您可以只使用$("div[id^=realProp]").filter(":hidden").first().show()过滤hidden div并始终显示第一个div。

演示代码

$('div[id^=realProp]').hide();

var count = 0;
$('.show_div').on('click', function() {
  $('div[id^=realProp]:eq(' + count + ')').show(); //show div
  count++; //for next div to show

  //or without count ..use below 
  //show first div..by filtering hidden divs
  //$("div[id^=realProp]").filter(":hidden").first().show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="realProp1">
  <input name="FirstName[0]" class="form-control" />
</div>

<div id="realProp2">
  <input name="FirstName[1]" class="form-control" />
</div>

<div id="realProp3">
  <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" class="btn btn-primary show_div">Add Item</button>

不使用jquery

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

c9x0cxw0

c9x0cxw02#

let count = 1;

window.onload = function() {
  document.getElementById("realProp1").style.display = 'none';
  document.getElementById("realProp2").style.display = 'none';
  document.getElementById("realProp3").style.display = 'none';

};

function AddItem() {
  for (let i = 1; i < 4; i++) {
    document.getElementById("realProp" + i).style.display = "none";
  }
  document.getElementById("realProp" + count).style.display = "";
  if (count <3 ){
    count++;
  } else {
   count = 1;
   } 
};
<div id="realProp1">
  <input name="FirstName[0]" class="form-control" />
</div>

<div id="realProp2">
  <input name="FirstName[1]" class="form-control" />
</div>

<div id="realProp3">
  <input name="FirstName[2]" class="form-control" />
</div>

<button type="button" onclick="AddItem()" class="btn btn-primary">Add Item</button>

相关问题