1

我正在创建一个内部用户可以单独单击的按钮表。我需要这些按钮才能将背景从白色切换到绿色再到红色，然后再切换回白色......用户是内部用户，我可以指定这只适用于 Chrome。我想坚持使用基本的 HTML5/CSS3 和 Javascript，因为它更具程序性，而且我的团队（我们不是网页开发人员）更有可能维护它。

按钮元素似乎与文本或其他元素的工作方式不同。我已经使用代码来更改其他背景颜色，但是当元素是按钮时它不起作用。

我的 2 个基本阻塞问题是：

  1. 您如何在 onClick() 例程中读取当前背景颜色，以便我的代码可以计算下一个颜色？

    如何更改 Button 元素的样式或类，以便在退出 onClick() 例程期间或退出时更改背景颜色？

我见过在 CSS 文件中定义 3 种不同颜色样式的示例，如下所示：

.make-background-white { background-color: white}
.make-background-green { background-color: green}
.make-background-red   { background-color: red}

当我最初绘制按钮时，我可以使用它们。但我不知道如何在 onClick() 例程中“读取”当前背景颜色，也无法更改颜色。

更多细节

我从数据库中读取以查找按距离排序的商店周围的所有邮政编码。我创建了一个以邮政编码作为文本的按钮表，范围为 40-600 个按钮。背景颜色显示未分配的邮政编码（白色背景）和已分配的邮政编码（绿色背景）。

有时，用户想要单击几个 White 邮政编码来表示他们想要将该代码分配给商店。

我还想要一些帮助按钮，用户可以单击这些按钮自动为半径为 30 或 60 或 90 英里的商店着色/分配邮政编码。

我在幕后有一个大型 Javascript 哈希/关联数组，它使用邮政编码作为键，用于创建按钮、跟踪距离、跟踪分配或未分配的邮政编码等。这很简单. 它的动态改变按钮背景让我失望。

经过三天的黑客攻击后，我确实设法通过使用带有如下回调的 Jquery 来完成某些工作：

$(".btn").click(function() {
    if ( $(this).hasClass ('make-background-white') {
        $(this).removeClass('make-background-white');
        $(this).addClass ('make-background-green');
    } else if ( $(this).hasClass('make-background-green') {
         // Remove green, add red
    } else if () {
        // Remove red, add white
    }

}

这似乎触发了按钮以使用新背景重新绘制，并通过在“类”属性中存储一个字符串来工作，以便我以后可以读取和操作。这是我在其他更直接的 Javascript 中的回调，其他使用“getElementById()”的 onClick() 例程似乎无法以相同的方式读取或操作“class”属性。

任何在 Javascript 中执行上述操作的帮助将不胜感激。

4

5 回答 5

1

如果每个按钮一次只需要一个类名，则可以在单击时读取/写入类名。

$(".btn").click(function() {
   var c=this.className;
   if(c=='make-background-white' || c=='')this.className='make-background-red';
   else if(c=='make-background-red')this.className='make-background-green';
   else this.className='make-background-white';
}

这假设您从白色背景开始，或者因为所有按钮都以这种方式开始（按钮，.make-background-white{background-color:white;color:black}），或者您设置了它们的类属性。

于 2012-06-01T20:42:07.703 回答
1

如果您的目标是在纯 JavaScript 中实现背景颜色循环按钮（在这种情况下不依赖类名），那么下面是一种可能的方法，尽管它可能过于复杂：

function inArray(needle, haystack) {
    if (!needle || !haystack) {
        return false;
    }
    else {
        var notFound = -1;
        for (var i = 0, len = haystack.length; i < len; i++) {
            if (haystack[i] == needle) {
                return i;
            }
        }
        return notFound;
    }
}

function colorToggle(el, colors) {
    if (!el) {
        return false;
    }
    else {
        var colors = colors || [
            'rgb(255, 0, 0)',
            'rgb(0, 255, 0)',
            'rgb(0, 0, 255)'],
            wGCS = window.getComputedStyle,
            curColor = wGCS(el, null).backgroundColor;
        var pos = inArray(curColor, colors);
        if (pos > -1 && pos < (colors.length - 1)) {
            el.style.backgroundColor = colors[inArray(curColor, colors) + 1];
        }
        else if (pos > -1 && pos == (colors.length - 1)) {
            el.style.backgroundColor = colors[0];
        }
    }
}

var buttons = document.querySelectorAll('button.colorToggle');

for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)';
    buttons[i].onclick = function() {
        colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']);
    };
}​

JS 小提琴演示。

由于您保证这只需要在 Chrome 中运行，我只在 Chromium 18 中进行了测试（因为我没有 Windows 或 Mac 来明确测试 Google Chrome），这似乎确实符合您的要求。

参考：

于 2012-06-01T19:44:36.087 回答
1

您真的需要在更改之前获取 CSS 属性吗？没有此先决条件的示例：

<html>
<head>
<script type="text/javascript">
var bg_colors = ['red', 'blue', 'green']

function change_bg_color()
{
  bg_color = bg_colors.shift();
  bg_colors.push(bg_color);
  document.getElementById("demo").style.backgroundColor=bg_color;
}
</script>
</head>
<body>

<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="change_bg_color()">change background-color</button>

</body>
</html>
于 2012-06-01T19:51:25.347 回答
0

您可以通过 jquery setTimeOut 函数来实现这一点。通过保持颜色的隐藏值，您可以切换样式

<script>
setTimeout(function() {   
//code to change style to button
}, 10000);
</script>
于 2013-06-26T12:15:51.007 回答
0

成功。我终于找到了如何使用 Javascript 访问 className 属性。

并且不知何故 - 设置 className 似乎会触发按钮的重新绘制。

下面是我用 onClick="zipClick('this_button', 'this_textarea')" 调用的函数

感谢您的所有精彩回复。

    // This function does 2 things:
    //    Changes the background color of the button
    //    Calls a REST service
    function zipClick (aButtonId, aTextAreaId) {

        var lButton = document.getElementById(aButtonId);
        var lClassName = lButton.className;

        // lClassName should be something like: "btn make-background-yellow"
        //alert ("Button Class Start = " + lClassName);

        if ( lClassName.indexOf('green') > -1 ) {
            lButton.className = 'btn make-background-yellow';
        } else if ( lClassName.indexOf('white') > -1) {
            lButton.className = 'btn make-background-green';
        } else if ( lClassName.indexOf('yellow') > -1 ) {
            lButton.className = 'btn make-background-white';
        } else {
            // Should never get here but fix the class name for the next click
            lButton.className = 'btn make-background-white';
        }

        alert ("old class: " + lClassName + "\nnew class: " + lButton.className);

    }   // zipClick
于 2012-06-01T22:03:58.663 回答