javascript - 什么时候使用 "class"与 "id"？

Question

我正在使用 Bootstrap 来设计我的表格，这是一个基本的待办事项列表。我想在一个单元格中添加一个表单输入，并在右侧紧挨着它的单元格中添加选中按钮。我想使用 id="check-button"。我想当我运行我的 JavaScript 和 jQuery 时，如果我想添加更多按钮，我将需要使用类。我现在正在设置我的 HTML 和 JS。

这是我对 HTML 的看法:

<div class = "container">
  <div class="col-md-8">
    <table class="table table-hover">
      <thead>
        <tr>
          <td>To Do</td>
          <td> Status</td>
       </tr>
    </thead>
    <tbody>
      <tr>
        <td>  
          <div class="input-group">
             <span class="input-group-addon">
             <input type="text" class="form-control" aria-label="..." placeholder="Text input" id="disabledInput">
             </span> 
           </div><!-- /input-group -->
        </td>
        <td id="check-button">
          <input type="checkbox" aria-label="...">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

如评论中所述，id 应用作唯一标识符。为了帮助强制执行此操作，如果同一页面上存在具有相同值的重复 id= 属性，则您的 HTML 标记将无效。

在决定使用什么时，请考虑如何在 JS/jQuery 中选择元素。 jQuery 是否会在处理时使用该元素并且仅使用该元素？如果是这样，那么 id 就可以了，如果该元素是一个组的一部分，并且您希望在该组中的任何元素发生某些事情时重新使用 jQuery，然后使用 class= 更合适。

id 和 class 也可以一起使用。假设您希望在单击某个组时发生某些事情，但也想确切地知道单击了该组中的哪个元素，您可以执行以下操作:

HTML:

<div id="1" class="clickable"> Click Here!! </div>
<div id="2" class="clickable"> Click Here!! </div>
<div id="3" class="clickable"> Click Here!! </div>
<div id="Clicked"></div>

jQuery:

$('.clickable').click(function(){
   // Reset the color of all clickable elements
   $('.clickable').css("background-color","white");
   // Display which element we clicked
   $('#Clicked').html('You Clicked Div: ' +this.id);
   // Set the background color of the clicked element
   $(this).css("background-color","lightgreen");
});

JSFiddle

在这个例子中，前三个 div 是一个“组”的一部分，通过在 jQuery 中使用一个通用的 class="clickable" 然后我可以为这些元素中的任何一个触发一个事件，而不必重复代码。

.clickable 选择器是一个 Class Selector这意味着它会被任何具有 class="clickable" 的元素触发，这不一定是 div。

#Clicked 选择器是一个 Id Selector这将选择匹配 id="Clicked"

的第一个元素

一旦 .click 事件被触发，this.id 可用于从三个元素中获取我们点击的确切元素，$( this) 可用于操作被点击的元素，$('.clickable') 可用于操作按 class 属性分组的所有元素。