javascript - 更改具有类的所有元素的 id

Question

总的来说，我对 JavaScript/Web 开发还很陌生。我正在尝试创建一个接受输入字符串的 JS 函数。该字符串将是一个类的名称。我正在尝试获取该类的所有元素(它们都是 id 的)，然后将“OFF”添加到所有 id 的末尾。我一直在浏览现有的线程，并找到了这个线程:

Give all elements in Class an seperate Id Javascript

但是，我仍然无法让我的功能正常工作:

function idOFF (inputClass) {
    var x = document.getElementsByClassName("'" + inputClass + "'");
    for (i = 0; i < x.length; i++) {
        x.setAttribute('id', x[i] + "OFF");
    }
}

我已经使用 jQuery 在个人层面上完成了这项工作，并尝试将该代码合并到我的函数中。它也不会那样工作:

function idOFF (inputClass) {
    var x = document.getElementsByClassName("'" + inputClass + "'");
    for (i = 0; i < x.length; i++) {        
        $("'#" + x[i] "'").attr("id", x[i] + "OFF");
    }
}

Answer 1

如果您使用 jquery ，您可以执行以下操作:

function idOFF (inputClass) {
    var $elms = $("." + inputClass);
    $elms.forEach(function () {
        var $this = $(this);
        $this.attr("id", $this.attr("id") + "OFF");
        // or just this:
        // this.id += "OFF"
    });
}

您也可以在纯 javascript 中做到这一点, 修复当前代码中的一些问题:

function idOFF (inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {        
        x[i].id += "OFF";
    }
}

请注意 getElementsByClassName，我在其中删除了额外的引号，还删除了 jQuery 包装，将其替换为 id。

  function idOFF(inputClass) {
    var x = document.getElementsByClassName(inputClass);
    for (i = 0; i < x.length; i++) {
      x[i].id += "OFF";
    }
  }

  idOFF("foo");

#testOFF {
  color: red;
}

<div class="foo" id="test">1</div>
<div class="foo" id="test1">2</div>
<div class="foo" id="test2">3</div>
<div class="foo" id="test3">4</div>