Question

我有一个无序列表，我使用ID来识别最后点击的当前列表项。单击其他项目时，我使用js将id切换到列表中的其他项目，以便可以应用样式。

对我来说似乎很直观，只能使用一次的唯一项目（选定的li项目）应该被识别为ID，这就是我这样做的原因，但我被告知这样做是不好的做法。

Answer 1

你的问题实际上有几个有趣的组成部分，让我试着尽可能好地回答它们： - ）

“如果元素是唯一的，可以使用javascript更改ID吗？”

你可以说这是一个合理的案例，如果元素真的是唯一的，那么使用JavaScript“移动”ID并没有真正的危害。

<强> BUT

在您的描述中，您可以触及更基本的内容：

“点击其他项目时，我使用js将ID切换到列表中的其他项目，以便可以应用样式。”

如果是这种情况（您更改样式的ID），那么我建议您改用类。人们以前已经给了你一个很好的提示，像“is-active”类这样的东西会非常有用，因为它比ID更不规范，如果需要可以在多个项目上使用，如果你使用确定状态的类（如“ is-active“，”has-children“，”is-animating“等等，在代码的后续部分也很容易重复使用它们，并且很清楚元素目前正在做什么。 / p>

一些参考代码：

<强> HTML

<ul>
  <li>Some item</li>
  <li class="is-active">Some item</li>
  <li>Some item</li>
  <li>Some item</li>
</ul>

<强> CSS

.is-active {
  color: #eee;
  background-color: #222;
}

<强>的jQuery

// You probably want a bit more specific selector, but it's just an example.
$('li').on('click', function() {

  var $element = $(this),
      $elements = $('li');

  if (!$element.hasClass('is-active')) {
    $elements.removeClass('is-active');
    $element.addClass('is-active');
  }

});

Answer 2

我不会这样做。这似乎是您发现HTML 5's data attribute的机会，您可以将其用于CSS样式（使用属性选择器）和JS使用（使用dataset或jQuery＆＃39; s .data()方法）。 Quick definition from MDN：

HTML5在设计时应考虑到可扩展性与特定元素相关联但不需要任何定义含义。 data- *属性允许我们存储额外的信息标准的，语义的HTML元素，没有其他的黑客攻击 classList，非标准属性，DOM上的额外属性或 setUserData来。

在HTML方面：

<!-- You can use data without value, and just test its presence -->
<li data-selected> 
    ...
</li>

在CSS中：

li[data-selected]{
   ...
}

Answer 3

由于您可能需要在将来某个时间点引用元素的特定id，因此更改它可能是一个坏主意。在您的情况下，最好只将一个类应用于单击的最后一个项目。

如果元素是唯一的，使用javascript更改ID是否可行？

3 个答案: