Question

现在我正在创建一个可以在主页上展示多个图像的网站，只需点击一下按钮即可循环播放。几乎像一个画廊，但更多的是面向页面预览。我想弄清楚的是如何在单击按钮时更改div的id / class。

我已经查看了其他一些问题，但没有一个问题显示4个不同的ID。

我对JavaScript非常陌生，我正在努力找出最适合我的情况。

这是我为我的页面制作的jsFiddle。目标是让顶部的按钮在点击时将绿色div #Filler更改为新的ID /类。

#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; }

更改为

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

}

就像我说的那样，我对此非常陌生，这适用于WebDesign类项目。

Answer 1

使用Javascript：

document.getElementById('Filler').id = 'Filler2';

Answer 2

尝试

包含jquery库并执行

$(function() {
    $('#Filler').click(function() {
        $(this).attr('id', 'Filler2');
    });
});

Answer 3

以下内容将更改给定元素的类或ID（回答您的问题）

var element = document.getElementById("myElement");
element.setAttribute("class", "aNewClass");
element.setAttribute("id", "aNewID");

但我不会像你的小提琴暗示你那样处理事情

我用＃元素选择器定义共享CSS，然后用差异来定义。类选择器和仅交换类

这是一个例子 http://jsfiddle.net/thisishardcoded/XRgbM/

Answer 4

答案是：node.setAttribute。

一个重要的建议：不要在HTML中使用重复的ID。 ID应该标识单个节点。如果您需要具有相同标识符的多个项目，请使用类。

您可以将此代码放入您的小提琴中，并按要求运行。

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

另请参阅其他答案中的jQuery示例，您的生活将会轻松得多。

单击按钮更改div id？

4 个答案: