点击按钮后更改 div 标识符？

Question

我正在创建一个网站，可以在主页上展示多张图片，并且可以通过按钮点击循环显示。就像一个画廊，但更适合页面预览。我想要解决的问题是如何在单击按钮时更改div的id/class。

我查看了一些其他问题，但没有一个问题显示这种情况发生在4个不同的ids上。

我非常新于JavaScript，并试图找出最适合我的情况的方法。

这是我为我的页面制作的jsFiddle。目标是使顶部的按钮在单击时将绿色div #Filler 更改为新的id/class。

http://jsfiddle.net/xCGDT/1/

#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课程项目。

- Scherf

---

你无法仅使用HTML和CSS完成此操作，需要JavaScript。 - jrd1

谢谢您的快速回复。我意识到我不能使用CSS*来完成这个，这就是为什么我在这里询问如何使用JavaScript完成它的原因。 - Scherf

Answer 1

使用JavaScript：

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

- Niels Keurentjes

Answer 2

尝试

包含jQuery库并按照以下方式进行操作

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

- Tamil Selvan C

---

谢谢您的回复。我在我的fiddle中添加了jquery，但是我不确定这段代码如何帮助我。 - Scherf

好的，没事了，我现在明白了。我希望能够通过顶部的按钮更改ID，而不是点击div本身 :P - Scherf

Answer 3

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

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

但我不会像你的代码示例中建议的那样去处理。我会用 # 元素选择器定义共享的 CSS，然后使用 . 类选择器来区分不同之处，并仅交换类。以下是示例：http://jsfiddle.net/thisishardcoded/XRgbM/

- Jim

---

哦，我猜我把"."和"#"搞反了。谢谢你的例子。 - Scherf

谢谢你的帮助！我花了一些时间，但现在我明白了这段代码是如何工作的，并且做出了这个：http://jsfiddle.net/XRgbM/2/ - Scherf

Answer 4

答案是：node.setAttribute。

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

您可以将此代码放入您的fiddle中，并按照要求工作。

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示例可以让你的生活更加轻松。

- jacmkno

---

确实是这样！谢谢！不过我注意到的一件事是，当我在两个ID之间切换时，它不会再次播放动画，这正是我希望能够做到的。 - Scherf

问题在于您的CSS动画是设计为将不透明度从当前值更改为100％，因此触发动画的唯一方法是通过单击LINK2，这会将不透明度设置回0，然后转到任何其他按钮。如果要对背景进行动画处理，则必须将其添加到CSS中（如果需要，可以使用更具体的选择器）。div { transition: background 2s; -webkit-transition: background 2s; /* Safari */ } - jacmkno