[英]How to display multiple elements on clicking a link
我的页面中有多个链接。 当我单击链接时，将显示输入元素，如下面的演示所示。 但是，如果我放置2个链接，它将不起作用。 我非常确定问题是我重复了id =“ barcode”，该条形码应该只使用一次，但是我找不到解决方法。
https://jsfiddle.net/w3oz0txq/4/
<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>
由于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>
尝试在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>
按照规则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>
为每个输入使用不同的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>
这是使用类而不是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>
再次单击链接以显示后，datatable插件不显示元素
[英]datatable plugin not display elements after clicking again on link to show
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.