我想知道在使用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 -->
id
在 JavaScript 中创建全局作用域变量,这可能会导致错误。 - vsync