Изменить идентификатор для всех элементов, имеющих класс

Question

Я довольно новичок в JavaScript/веб-разработке в целом. Я пытаюсь создать JS-функцию, которая принимает строку ввода. Эта строка будет именем класса. Я пытаюсь получить все элементы этого класса (все они 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 где я удалил дополнительные кавычки, и я также снял обертку 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>

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 + "'"); 

Это на самом деле не нужно быть в цитирует это. Ниже приведен код ниже, который должен помочь вам.

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

<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>

Как epascarello указал, а чего я не сделал, но код отражает его в ваш цикл вы вы не размещая добавочную стоимость i после x в x.setAttribute так, чтобы элемент быть выбранным в течение этого цикла, не выбирается.

Это будет изменено на x[i] соответственно.

Answer 4

Вы могли бы использовать его вот так.

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