Question

我正在使用以下代码 -

<script>var element = document.getElementById("more");
element.classList.add("wide");</script>

它用于php if语句。如果wordpress中的帖子已完成特定的自定义字段，则将.wide类应用于id为#more的帖子按钮。

问题在于，如果页面上有多个id #more实例（就像我的摘录页面中那样），它只针对#more的第一个实例，而不是页面上剩余的帖子按钮。

有没有办法改变上面的代码，所以它针对“更多”的所有ID或任何其他方式我可以标记我想要定位的按钮并更改代码以将它们全部定位？

Answer 1

页面上应该只有一个特定ID的实例，因此getElementById只返回一个值。如果你想使用多个，那么你应该使用一个类来使用它来定位你想要操作的元素。

然后我会建议使用jQuery或其他工具来简化选择正确的元素

例如：

<a class="more"></a>

<script>
    // Select .more elements and add the class wide.
    $('.more').addClass('wide');
</script>

Answer 2

我想您知道具有相同ID的多个元素是无效的HTML。但是，由于浏览器可以容忍，你可以使用 querySelectorAll ，它在IE8及更高版本的标准模式下运行，而且几乎所有其他浏览器都可以运行：

var moreList = document.querySelectorAll('[id=more]');

或者，你可以使用 getElementsByTagName（'*'）并循环返回的成员来收集那些id为 more 的人。

然后，您可以遍历元素并添加类 wide ：

for (var i=0, iLen=moreList.length; i<iLen; i++) {
  addClass(moreList[i], 'wide');
}

使用以下帮助程序（多年前编写并保存在库中）：

function trim(s) {
  return s.replace(/^\s+|\s+$/g,'');
}

function hasClass(el, className) {
  var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return re.test(el.className);
}

function addClass(el, className) {
  if (!hasClass(el, className)) {
    el.className = trim(el.className + ' ' + className);
  }
}

在JS脚本中定位Id的所有实例以添加类

2 个答案: