javascript 单击按钮更改 div id？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16410023/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div id on click of a button?
提问by Scherf
Right now I'm working to create a website that can showcase multiple images on the homepage, that can cycle by the click of a button. Almost like a gallery but more geared towards page previews. What I am trying to figure out is how to change a div's id/class when a button is clicked.
现在，我正在努力创建一个网站，该网站可以在主页上展示多个图像，单击按钮即可循环显示。几乎像一个画廊，但更适合页面预览。我想弄清楚的是如何在单击按钮时更改 div 的 id/class。
I have looked at a few other questions, but none that show this happening for 4 different ids.
我查看了其他一些问题，但没有一个问题表明 4 个不同的 ID 会发生这种情况。
I am very new to JavaScript, and am trying to figure it out to best suit my situation.
我对 JavaScript 很陌生，正在尝试找出最适合我的情况的方法。
Here is the jsFiddle that I have made for my page. The goal is to have the buttons at the top change the green div #Fillerto a new id/class on click.
这是我为我的页面制作的 jsFiddle。目标是让顶部的按钮在#Filler单击时将绿色 div更改为新的 id/class。
#Filler {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: green;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
background-image: url(nature5.jpg);
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1; }
changed to
变成
#Filler2 {
margin: auto;
max-height: 700px;
width: 1400px;
background-color: red;
max-width: 1366px;
height: 800px;
z-index: 1;
margin-top: -250px;
overflow: inherit;
animation: Filler 1s 1;
-webkit-animation: Filler 1s 1;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
opacity:1;
}
Like I said I'm very new to this, and this is for a WebDesign class project.
就像我说的，我对此很陌生，这是针对 WebDesign 类项目的。
回答by Niels Keurentjes
Use Javascript:
使用 JavaScript：
document.getElementById('Filler').id = 'Filler2';
回答by Tamil Selvan C
Try
尝试
Include jquery library and do as
包含 jquery 库并执行
$(function() {
$('#Filler').click(function() {
$(this).attr('id', 'Filler2');
});
});
回答by Jim
The following will change the class or id of a given element (answering your question)
以下将更改给定元素的类或 ID（回答您的问题）
var element = document.getElementById("myElement");
element.setAttribute("class", "aNewClass");
element.setAttribute("id", "aNewID");
but I wouldn't approach things in the way your fiddle is suggesting you are
但我不会像你的小提琴所暗示的那样处理事情
I'd define shared CSS with a # element selector and then the differences in . class selectors and swap out the classes only
我将使用 # 元素选择器定义共享 CSS，然后定义 . 类选择器并仅换出类
here's an example http://jsfiddle.net/thisishardcoded/XRgbM/
回答by jacmkno
The answer is: node.setAttribute.
答案是：node.setAttribute。
An important advice: Do not use repeated IDs in your HTML. IDs are supposed to identify a single node. Instead use classes if you require several items with the same identifier.
一个重要的建议：不要在 HTML 中使用重复的 ID。ID 应该用于标识单个节点。如果您需要多个具有相同标识符的项目，请改用类。
You can put this code in your fiddle and it works as requested.
你可以把这段代码放在你的小提琴中，它会按要求工作。
var links = document.getElementById('Nav').getElementsByTagName('A');
var filler = document.getElementById('Filler');
for(var i=0;i<links.length;i++) (function(j){
links[j].addEventListener('click', function(e){
filler.setAttribute('id', 'Filler'+(j?j:''));
});
})(i);
Also see the jQuery examples in other answers your life would be a lot easier.
另请参阅其他答案中的 jQuery 示例，您的生活会轻松很多。
