在HTML中为每个已使用的元素添加ID是否是不好的做法？

Question

在HTML中为每个已使用的元素添加ID是否是不好的做法？

4

我想知道在使用jquery操纵html页面中的某些元素时最佳实践是什么。目前，我有一个面板，其中嵌入了一个表单，包括一个输入框、复选框、提交/重置/测试按钮。现在，我已经为每个元素分配了一个id，以便在每个元素更改/选择时采取适当的操作。然而，通过分配和管理每个元素的id，我觉得我的代码变得非常混乱和难以阅读。我知道按id选择对浏览器来说是有效率的，但是否最好只给面板/表单一个ID，然后在面板/表单内调用不同的选择器？有没有关于选择我下面分配ID的元素的建议？（我正在修改的那些元素等）。谢谢！

        <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="sample_panel">
                <div class="panel-heading">
                    Heading
                </div>
                <div class="panel-body">
                    <form role="form" id="form1">
                        <div class="form-group">
                            <h4>Subheading</h4>
                            <div class="form-group input-group">
                                <span class="input-group-addon" id="input_addon">some_text</span>
                                <input type="text" id="input1" class="form-control" placeholder="Enter text">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <span class="help-block">
                                        <input type="checkbox" id="cb1" >some_text
                                    </span>
                                </label>
                            </div>
                        </div>
                        <button type="submit" class="btn">Submit</button>
                        <button type="reset" class="btn id="reset_btn">Reset</button>
                        <button type="button" class="btn" id="test_btn">Test</button>
                        <i id="some_image"></i>
                    </form>
                </div>
                <div class="panel-footer" id="footer"></div>
            </div>
        </div>
        <!-- /.col-lg-6 -->
    </div>
    <!-- /.row -->

- Stetzon

8

这个问题更适合在http://codereview.stackexchange.com/上进行，因为它询问的是最佳实践。 - Jay Blanchard

长期来看，最好在容器上使用ID，在单个项目上使用类/属性，除非它们是应用程序范围内的。 - dandavis

通常情况下，在HTML中使用重复模板时，使用类并在父类中搜索会更容易。 - charlietfl

@Jay Blanchard，谢谢您的建议。我还不太懂得发布规则，对于发布到“错误”的地方表示抱歉。 - Stetzon

id 在 JavaScript 中创建全局作用域变量，这可能会导致错误。 - vsync

2个回答

2

请记住，ID是唯一标识符，因此应具有更具体的名称。我建议仅在实际需要时使用它们，并且在类不是更好的标识方式时才使用。

大量使用类，但稍微节约使用ID。当我编写第一个MVC应用程序时，我也曾面对这个问题。祝好运！

别忘了StackOverflow上还有一个代码审查站点。

- Gavin42

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Surreal Dreams · Accepted Answer

我会给页面中包含页面子集和重要唯一元素的主要元素分配ID，这样可以直接访问它们。但我不会给每个列表项、链接或div都分配ID，因为这会使代码变得混乱并且可能会导致维护上的困难。您通常不需要选择页面上的大多数元素，并且经常同时访问多个元素-类对于此非常有用。

虽然通过id访问元素非常快速和高效，但选择器系统也很强大有用，因为您可以以多种方式选择元素。要充分利用其他选择方法，您将使用jQuery完成更多任务。