Question

所以我正在尝试创建一个具有2个状态的按钮，可以通过单击它来切换它们。类似按钮facebook的东西。它在灰色不喜欢的舞台和喜欢蓝色的舞台之间切换。我正试图用我创建的图标来做这件事。

html（在我的代码中使用其中的6个）

<img id="list" src="img/listwhite.svg">

CSS

section article div img {
    height: 1em;
    width: 1em;
    opacity: 0.2; 
}

#list {
    transition: all 300ms ease-in-out;
}

#listselected {
    transition: all 200ms ease-in-out;
    opacity: 0.8;
}

的javascript

function listClick (){
    document.getElementById('list').id = 'listselected';
}
document.getElementById("list").addEventListener("click", listClick);


function listunClick (){
    document.getElementById('listselected').id = 'list';
}
document.getElementById("listselected").addEventListener("click", listunClick);

现在使用此代码，第一部分可行，但在第二部分出现问题。我的网站上另一个#list的状态将改为#listselected，而不是更改第一个图标的状态。我不知道现在要改变什么，我希望你们能帮助我。

由于

Answer 1

我认为您想要做的是在两个声明块之间切换。使用toggle对象中的classList方法可以轻松完成此操作。为了实现这一点，您必须将id选择器更改为类选择器。

document.querySelector('.list').classList.toggle('insert-class-name');

Answer 2

您需要进行一些更改，但这是一个基本的工作示例。

关键是您不想更改元素的ID，而是应用并删除类#list { height: 3em; width: auto; opacity: 0.2; } #list { transition: all 300ms ease-in-out; } #list.selected { transition: all 200ms ease-in-out; opacity: 0.8; }

＆＃13;

<img id="list" onclick="this.classList.toggle('selected')" src="http://mygimptutorial.com/images/button-with-reflection/11.jpg">

＆＃13;

ng new sassy-project --style=sass

＆＃13;

试图创建一个具有2个状态的按钮

2 个答案: