更改所有具有類別元素的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包裝與替換它。

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指出以及其中我沒有，但是代碼反映它，在你的for循環你，你是不是在x.setAttribute放置增量值ix後這樣的元素在該循環過程中未被選中時被選中。

這將分別更改爲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'); 
    }) 
}