隐藏相同类别的JavaScript

时间：2018-10-29 17:45:31

标签： javascript jquery

我试图隐藏多个输入：

 <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>

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

在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>

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

答案 2 :(得分：0)

那是因为您正在使用元素ID来调用操作。使用element的ID只会找到第一个匹配项，然后仅将其隐藏。如果要全局替换它，请尝试按类调用它。它将按该页面上的类替换所有出现的元素。在此处查看jsbin-https://jsbin.com/liwitaxefe/edit?html,css,js,output 

$('.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>
相关问题
最新问题