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

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

javascript jquery html

Javascript 如何在单击链接时显示多个元素,javascript,jquery,html,Javascript,Jquery,Html,我的页面中有多个链接。当我点击链接时，输入元素显示在下面的演示中。但是，如果我放了两个链接，它就不起作用了。我很确定问题在于我重复了id=“barcode”，它应该只使用一次，但我找不到如何解决这个问题函数show（）{ document.getElementById（“条形码”）.style.display=“块”； } 由于jQuery被标记，所以我使用jQuery解决方案你说得对，一个id只能使用一次。它必须是独一无二的。因此，应该使用类。或者在DOM树上/下搜索 $（

我的页面中有多个链接。当我点击链接时，输入元素显示在下面的演示中。但是，如果我放了两个链接，它就不起作用了。我很确定问题在于我重复了id=“barcode”，它应该只使用一次，但我找不到如何解决这个问题


函数show（）{
document.getElementById（“条形码”）.style.display=“块”；
}

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

你说得对，一个id只能使用一次。它必须是独一无二的。因此，应该使用类。或者在DOM树上/下搜索

$（函数（）{
$（'.show_barcode'）。在（'click'，函数（e）上{
e、 preventDefault；/*禁用默认单击操作*/
$（this.next（'div'）.show（）；
/*
或者，如果要在再次单击后隐藏输入，请使用下一行
$（this.next（'div'）.toggle（）；
*/
});
});



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


功能显示（id）{
document.getElementById（id）.style.display=“block”；
}




根据规则，Id对于HTML中的每个元素都应该是唯一的
使用Jquery并处理元素的Class属性。改变了身体的结构，将锚和输入保持在一个div中。单击锚元素时，将显示包含在其div块中的输入框，其余部分将隐藏
以下是JS小提琴，同样适用于：

$（文档）.ready（函数（）{
$（“.ele a”）。单击（函数（）{
$（“.barcode”）.hide（）；//隐藏所有条形码输入
$（this）.parent（“.ele”）.children（.barcode”）.show（）；//显示所单击链接的输入框
});
});
对每个输入使用不同的ID，并在show（）函数中传递它们，以确定应该显示哪个输入


功能显示（id）{
document.getElementById（id）.style.display=“block”；
}




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

var barcodes=document.getElementsByClassName（“条形码”）；
对于（设i=0；i<（条形码长度）；i++）{
条形码[i]。添加文本列表（“单击”，函数（t）{
var vis=this.nextSibling.nextSibling.style.display；
if（this.nextSibling.nextSibling.style.display==“无”）{
this.nextSibling.nextSibling.style.display=“block”；
}否则{
this.nextSibling.nextSibling.style.display=“无”；
}
});
}



Id应该是唯一的。你能把它改成class=“barcode”吗？试试不同的2个ID或使用类，因为它听起来像是OP想要隐藏/显示多个元素。这将是最好的答案。如果是本机javascript，我会很完美。因为它是jquery，所以非常棒。批准作为答复，谢谢。
<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>