Question

我对JavaScript / Web开发很新。我正在尝试创建一个带有输入字符串的JS函数。该字符串将是类的名称。我试图获取该类的所有元素（它们都是id），然后在所有id的末尾添加“OFF”。我一直在寻找现有的线程，并找到了这个：

的 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，我还删除了用id替换它的jQuery包装。

  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>

Answer 2

您不应该使用引号构建字符串

document.getElementsByClassName("'" + inputClass + "'");

应该是

document.getElementsByClassName(inputClass);

接下来，您无法访问循环中的单个元素

 x.setAttribute('id', x[i] + "OFF");

应该是

 x[i].setAttribute('id', x[i].id + "OFF");
  ^^^

所以你的脚本现在应该是

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

Answer 3

我注意到的一件事就是这一行

var x = document.getElementsByClassName("'" + inputClass + "'");

这并不需要像这样引用。以下是一些可以帮助您的代码。

＆＃13;

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

＆＃13;

<input type='text' id='myinput' value='funny'> <br>
<input type='button' onclick='idOFF(document.getElementById("myinput").value)' value='Go'>
<hr>
<div id='foo' class='funny'>1</div>
<div id='foo2' class='funny'>2</div>
<div id='foo3' class='funny'>3</div>
<div id='foo4' class='funny'>4</div>
<div id='foo5' class='funny'>5</div>

＆＃13;

正如epascarello指出的那样，我没有，但代码反映了它，在你的for循环中，你没有将i放在x {{1}之后因此，没有选择在该循环过程中选择的元素。

这将分别更改为x.setAttribute。

Answer 4

你可以像这样使用它。

function idOff(className) {
    [].forEach.call(document.getElementsByClassName(className), function (el, i, a) {
        var attr = el.getAttribute('id');
        el.setAttribute('id', attr + 'OFF');
    })
}

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

4 个答案: