您何时使用"class"与"id"相对? [英] When do you use "class" versus "id"?

问题描述

我正在使用Bootstrap设置我的表的样式，这是一个基本的待办事项列表.我想在一个单元格中添加一个表单输入，然后在右边的单元格中直接单击按钮.我想使用id="check-button".我想当我运行JavaScript和jQuery时，如果要添加更多按钮，就需要使用class.我现在正在设置HTML和JS.

I'm using Bootstrap to style my table, which is a basic to do list. I wanted to add a form input in one cell and check button in the cell directly next to it on the right. I wanted to use id="check-button". I think when I run my JavaScript and jQuery, I would need to use class if I want to add more buttons. I am now setting my HTML and 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>

推荐答案

如注释中所述，id应该用作唯一标识符.为了帮助实现这一点，如果在同一页面上重复具有相同值的id=属性，则HTML标记将无效.

As mentioned in comments id should be used as a unique identifier. To help enforce this your HTML Mark-up will not be valid if there are repeating id= attributes with the same value on the same page.

在决定使用什么时，请考虑如何在JS/jQuery中选择元素. jQuery在处理时会只使用该元素吗?如果是这样，那么id就可以了，如果该元素是组的一部分，并且您希望在该组中的任何项目发生任何事情时重新使用jQuery，那么使用class=更合适.

When it comes to deciding what to use, consider how the element will be selected within the JS/jQuery. Is the jQuery going to use that element and ONLY that element when processing? If so, then id is fine, if the element is part of a group and you would like to re-use the jQuery when something happens to any item in that group then using a class= is more appropriate.

id和class也可以一起使用.假设您希望每次单击某个组时都会发生某些事情，但又想确切地知道该组中的哪个项目已被单击，则可以执行以下操作:

id and class can also be used together. Say you want something to happen whenever a group is clicked, but also want to know exactly which item in the group was clicked, you could do something like:

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

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

In this example the first three divs are part of a 'group' by using a common class="clickable" in the jQuery I can then trigger an event for any of these elements without having to duplicate code.

.clickable选择器是类选择器，这意味着它将针对任何带有class="clickable"的元素，都不必是div.

The .clickable selector is a Class Selector which means that it will be triggered for any element with class="clickable", this does not have to be a div.

#Clicked选择器是 Id选择器，它将选择与id="Clicked"

The #Clicked selector is a Id Selector which will select the first element matching id="Clicked"

一旦触发了.click事件，就可以使用this.id来获取我们单击的三个元素中的确切元素，使用$(this)可以操纵被单击的元素，并且可以使用$('.clickable')来操纵按class属性分组的所有元素.

Once the .click event has been triggered the this.id can be used to get the exact element we clicked on out of the three, $(this) can be used to manipulate the clicked element and $('.clickable') can be used to manipulate all elements grouped by the class attribute.

这篇关于您何时使用"class"与"id"相对?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！