Question

我希望我的按钮在单击其中一个时更改为某种颜色，然后在单击另一个时再转回默认颜色。默认颜色为灰色，然后单击一个按钮时，它将保持橙色，直到单击另一个按钮。我不确定如何实现这一点。

使用vanilla JS是必需的，所以我不能使用jQuery

这是HTML和JS：

<button type="button" id="button1">1</button>
    <button type="button" id="button2">2</button>
    <button type="button" id="button3">3</button>

...

var userRating

document.getElementById('button1').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 1;
}
document.getElementById('button2').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 2;
}
document.getElementById('button3').onclick = function () {
    console.log(this.id + " was clicked")
    userRating = 3;
}

这是CSS：

button {
    -moz-box-shadow: 0px 10px 14px -7px #AAAAAA;
    -webkit-box-shadow: 0px 10px 14px -7px #AAAAAA;
    box-shadow: 0px 10px 14px -7px #AAAAAA;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #AAAAAA), color-stop(1, #AAAAAA));
    background:-moz-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%);
    background:-webkit-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%);
    background:-o-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%);
    background:-ms-linear-gradient(top, #AAAAAA 5%, #AAAAAA 100%);
    background:linear-gradient(to bottom, #AAAAAA 5%, #AAAAAA 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAAAAA', endColorstr='#AAAAAA',GradientType=0);
    background-color:#77b55a;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #4b8f29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:13px;
    font-weight:bold;
    padding:6px 12px;
    text-decoration:none;
    text-shadow:0px 1px 0px #5b8a3c;
}
button:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FF851B), color-stop(1, #FF851B));
    background:-moz-linear-gradient(top, #FF851B 5%, #FF851B 100%);
    background:-webkit-linear-gradient(top, #FF851B 5%, #FF851B 100%);
    background:-o-linear-gradient(top, #FF851B 5%, #FF851B 100%);
    background:-ms-linear-gradient(top, #FF851B 5%, #FF851B 100%);
    background:linear-gradient(to bottom, #FF851B 5%, #FF851B 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF851B', endColorstr='#FF851B',GradientType=0);
    background-color:#FF851B;
}
button:active {
    position:relative;
    top:1px;
}

如果你能指出我正确的方向那将是伟大的！我对这些东西很陌生。

Answer 1

一种可能的解决方案是为所选按钮添加CSS类：

button:hover, button.selected {
  ...
}

然后，为按钮设置所选类，如下所示：

document.getElementById('button1').className = 'selected';

您可以像这样清除所选的类：

document.getElementById('button1').className = '';

完整的解决方案在这里：https://jsfiddle.net/3fzb1kk1/

Answer 2

尝试添加类并删除类。

您必须使用所需的颜色创建一个选定的类。

from PyQt4.QtCore import * 
from PyQt4.QtGui import * 
import sys


def main(): 
    app     = QApplication (sys.argv)
    tree    = QTreeWidget ()
    item    = QTreeWidgetItem()

    tree.headerItem().setText(0, "col1")
    tree.headerItem().setText(1, "col2")
    tree.headerItem().setText(2, "col3")
    tree.headerItem().setText(3, "Notes")

    for ii in xrange(3):
        parent = QTreeWidgetItem(tree)
        parent.setText(0, "Parent {}".format(ii))
        parent.setFlags(parent.flags() | Qt.ItemIsTristate | Qt.ItemIsUserCheckable)
        for x in xrange(4):
            child = QTreeWidgetItem(parent)
            child.setFlags(child.flags() | Qt.ItemIsUserCheckable)
            child.setText(0, "Child {}".format(x))
            child.setCheckState(0, Qt.Unchecked)

            #create the checkbox
            for i in xrange(1, 5):
                if i < 3:
                    child.setText(i, "")
                    child.setCheckState(i, Qt.Unchecked)
                if i == 3:
                    child.setText(i, "Any Notes?")
                    child.setFlags(child.flags() | Qt.ItemIsEditable)

    tree.show() 
    sys.exit(app.exec_())

if __name__ == '__main__':
    main()

Answer 3

请检查here。那是你的HTML：

<div class="buttons-container">
    <button type="button" id="button1">1</button>
    <button type="button" id="button2">2</button>
    <button type="button" id="button3">3</button>
</div>

您只需要一种方法来管理点击事件，如下所示：

$('.buttons-container button').click(function(){
    $('.buttons-container button.active').removeClass("active");
    $(this).addClass("active");
});

并使用css类：

.active{
  background-color:orange;
}

我希望对你来说足够了！

JavaScript单击按钮颜色

3 个答案: