Question

我的页面中有多个链接。当我单击链接时，将显示输入元素，如下面的演示所示。但是，如果我放置2个链接，它将不起作用。我非常确定问题是我重复了id =“ barcode”，该条形码只能使用一次，但是找不到解决方法。

<script type="text/javascript">
  function show() {
    document.getElementById("barcode").style.display = "block";
  }

</script>
<br>
<a href="javascript:void(0);" onclick="show();">Please type barcode 1</a>

<div id="barcode" style="display: none">
  <input type="text" name="barcode_values[]">
</div>
<br>
<a href="javascript:void(0);" onclick="show();">Please type barcode 2</a>

<div id="barcode" style="display: none">
  <input type="text" name="barcode_values[]">
</div>

Answer 1

由于jQuery被标记，所以我使用jQuery解决方案。

您是对的，ID只能使用一次。它必须是唯一的。因此，请使用类。或在DOM树中上/下搜索。

$(function(){
  $('.show_barcode').on('click', function(e) {
    e.preventDefault; /* disable default click action */
    $(this).next('div').show();
    
    /*
    or if you want to hide the input after another click, then use next line 
    $(this).next('div').toggle();
    */
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="show_barcode">Please type barcode 1</a>

<div style="display: none">
  <input type="text" name="barcode_values[]" />
</div>
<br>

<a href="#" class="show_barcode">Please type barcode 2</a>
<div style="display: none">
  <input type="text" name="barcode_values[]" />
</div>

仅当div直接位于链接之后时，此功能才起作用。

因此，如果您想在周围移动元素，此后可能无法正常工作。您可以使用data-*属性进行更改。一个例子：

$(function(){
  $('.show_barcode').on('click', function(e) {
    e.preventDefault; /* disable default click action */
    var item = $(this).data('showitem');
    $('[data-input='+item+']').show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div style="display: none" data-input="1">
  <input type="text" name="barcode_values[]" value="first input" />
</div>
<br>


<div style="display: none" data-input="2">
  <input type="text" name="barcode_values[]" value="second input" /> 
</div>

<a href="#" class="show_barcode" data-showitem="1">Please type barcode 1</a>
<a href="#" class="show_barcode" data-showitem="2">Please type barcode 2</a>

Answer 2

尝试在show（）中分配和传递不同的ID，如下所示

 <script type="text/javascript">
 function show(id) {
     document.getElementById(id).style.display = "block";
     }

 </script>
  <br>
   <a href="javascript:void(0);" onclick="show('barcode');">Please type barcode 1</a>

  <div id="barcode" style="display: none">
    <input type="text" name="barcode_values[]">
  </div>
 <br>
 <a href="javascript:void(0);" onclick="show('barcode2');">Please type barcode 2</a>

   <div id="barcode2" style="display: none">
    <input type="text" name="barcode_values[]">
   </div>

Answer 3

按照规则 Id ，对于HTML中的每个元素都应该是唯一的。

使用Jquery并使用element的Class属性。改变了主体的结构，将锚和div保持在一起。单击锚元素时，将显示包含在其div块中的输入框，其余部分被隐藏。

这是相同的JS小提琴：https://jsfiddle.net/w3oz0txq/30/

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
            $(".ele a").click(function(){
        $(".barcode").hide(); //hide all barcode input
        $(this).parent(".ele").children(".barcode").show(); // show the input box for link clicked
          });
      });

    </script>
<head>
<body>
<div class="ele">
    <a href="javascript:void(0);" >Please type barcode 1</a>

    <div class="barcode" style="display: none">
      <input type="text" name="barcode_values[]" value="Bar 1">
    </div>
</div>

<div class="ele">
    <a href="javascript:void(0);" >Please type barcode 2</a>

    <div class="barcode" style="display: none">
      <input type="text" name="barcode_values[]" value="Bar 2">
    </div>
</div>

<div class="ele">
    <a href="javascript:void(0);" >Please type barcode 3</a>

    <div class="barcode" style="display: none">
      <input type="text" name="barcode_values[]" value="Bar 3">
    </div>
</div>
</body>
</html>

Answer 4

为每个输入使用不同的ID，并将其传递给show（）函数以标识应显示的输入。

<script type="text/javascript">
  function show(id) {
    document.getElementById(id).style.display = "block";
  }

</script>
<br>
<a href="javascript:void(0);" onclick="show('barcode1');">Please type barcode 1</a>

<div id="barcode1" style="display: none">
  <input type="text" name="barcode_values[]">
</div>
<br>
<a href="javascript:void(0);" onclick="show('barcode2');">Please type barcode 2</a>

<div id="barcode2" style="display: none">
  <input type="text" name="barcode_values[]">
</div>

Answer 5

另一种使用类而不是id的方法。

var barcodes = document.getElementsByClassName("barcode");

for (let i = 0; i < (barcodes.length); i++) {
  barcodes[i].addEventListener("click", function(t) {
    var vis = this.nextSibling.nextSibling.style.display;
    if (this.nextSibling.nextSibling.style.display == "none") {
      this.nextSibling.nextSibling.style.display = "block";
    } else {
      this.nextSibling.nextSibling.style.display = "none";
    }

  });
}

<a class="barcode" href="javascript:void(0);">Please type barcode 1</a>

<div style="display: none">
  <input type="text" name="barcode_values[]">
</div>
<br>

<a class="barcode" href="javascript:void(0);">Please type barcode 2</a>

<div style="display: none">
  <input type="text" name="barcode_values[]">
</div>

如何在单击链接时显示多个元素

5 个答案: