隐藏同类javascript

Question

我多次尝试隐藏输入：

<input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">

带有：

<script>

$('#reclamation_id').hide();
</script>

第一个模态使用隐藏输入，但第二个模态显示了输入，你能告诉我我在做什么吗？

我的html:在哪里

<div class="modal" tabindex="-1" role="dialog" id="signature1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 1</h4>
</div>
<div class="modal-body">
<canvas id="signature_1" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="signature2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
</div>
<div class="modal-body">
<canvas id="signature_2" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>

Answer 1

您不必为两个元素使用相同的id名称。

正如w3schools.com所说：

id选择器使用HTML元素的id属性来选择特定元素。

元素的id在页面中应该是唯一的，因此id选择器用于选择一个唯一的元素！

因此，如果只需要使用一个JQuery命令来选择它们，请使用相同的类名。因为类更灵活，并且可以对多个元素使用相同的类名。

例如：

$('.reclamation_class').hide()

<div class="modal" tabindex="-1" role="dialog" id="signature1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 1</h4>
</div>
<div class="modal-body">
<canvas id="signature_1" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id" class="reclamation_class" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="signature2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
</div>
<div class="modal-body">
<canvas id="signature_2" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id"  class="reclamation_class" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>

Answer 2

这是因为您使用元素id来调用操作。使用元素的id只会发现第一个出现，然后只隐藏那个。如果希望全局替换它，请尝试按类调用它。它将按类替换该页上所有出现的元素。请在此处查看jsbin-https://jsbin.com/liwitaxefe/edit?html，css，js，输出

$('.reclamation_id').hide();
<div class="modal" tabindex="-1" role="dialog" id="signature1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 1</h4>
</div>
<div class="modal-body">
<canvas id="signature_1" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input class="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="signature2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
</div>
<div class="modal-body">
<canvas id="signature_2" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input class="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>

Answer 3

在HTML中，id需要是唯一的。不能有两个id相同的HTML元素。

当您使用document.getElementById("reclamation_id");或$("#reclamation_id")时，您将只看到一个结果。这就是为什么你的代码只更改了其中一个：

console.log("Vanilla JS:", document.getElementById("reclamation_id"));
console.log("jQuery:", $("#reclamation_id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal" tabindex="-1" role="dialog" id="signature1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 1</h4>
</div>
<div class="modal-body">
<canvas id="signature_1" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="signature2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="title">Ajouter une signature 2 </h4>
</div>
<div class="modal-body">
<canvas id="signature_2" width="475px" height="225px"></canvas>
<div class="buttons">
<button class="clear">Effacer</button>
</div>
</div>
<div class="modal-footer">
<input id="reclamation_id" name="reclamation_id" value="{{$reclamation->id}}">
<button class="save">Sauvegarder la signature</button>
</div>
</div>
</div>
</div>

建议在引用多个元素时使用类名。