Question

这是我写的一些Javascript：

function toggle(clicked_id) {

// Change last button back to light gray.
if (typeof last_id !== 'undefined') {
    document.getElementById(last_id).style.opacity = '.35';
}

// Change current button to dark gray.
document.getElementById(clicked_id).style.opacity = '1';

last_id = clicked_id;
}

这是HTML：

<div class="circle" onClick="toggle(this.id)" id="button1"></div>
<div class="circle" onClick="toggle(this.id)" id="button2"></div>
<div class="circle" onClick="toggle(this.id)" id="button3"></div>

CSS：

.circle {
    background: black;
    width: .625em;
    height: .625em;
    border-radius: 50%;
    margin-bottom: .35em;
    opacity: .35;
}

.circle:hover {
    opacity: 1;
    cursor: pointer;
}

有3个按钮，每个按钮的不透明度为“.35”。悬停在按钮上时，其不透明度变为“1”。如您所见，这部分是用CSS完成的。到现在为止还挺好。我现在想要的是在单击按钮时将按钮的不透明度永久性地更改为“1”。它应该保持这样，直到我点击另一个按钮，此时它将返回'.35'并且新按钮将为'1'。

我试图通过Javascript实现这一点，但我无法弄清楚为什么我的代码不起作用。请看一下我的JSFiddle。

P.S。我为每个按钮分配了一个特定的id，但我宁愿不在样式表中定义它们。

Answer 1

我将创建一个具有不透明度1的新CSS类，并且onClick会更改所单击对象的类，并从该对象中删除.circle类。

Answer 2

实际上你的代码工作，但是JSFiddle的配置是错误的：你需要在左侧菜单中选择“No wrap-in”，如果你想像你一样用JS内联样式声明事件适用于您的toggle功能：http://jsfiddle.net/d4yMB/2/

function toggle(clicked_id) {

    // Change last button back to light gray.
    if (typeof last_id !== 'undefined') {
        document.getElementById(last_id).style.opacity = '.35';
    }

    // Change current button to dark gray.
    document.getElementById(clicked_id).style.opacity = '1';

    last_id = clicked_id;
}

Javascript：点击后更改元素的样式

2 个答案: