javascript - 改进这个: Change button text/background onmousedown - revert onmouseup

Question

我想看看社区中是否有人可以改进这段代码。

目标:应用程序充满了输入元素，这些元素的样式看起来像自定义按钮。它们有多种类型，例如“提交”、“重置”和“按钮”。当用户点击按钮时(即在 PC 上用鼠标单击或在触摸屏设备(例如 BlackBerry)上触摸屏幕的正确位置)，按钮文本和背景应发生变化以指示按钮已被按下。文本和背景应在执行与按钮关联的操作之前恢复 - 以指示按钮已被释放。

这是我的解决方案的代码片段 - 任何人都可以看到改进/精简/重构的方法吗？

<script type="text/javascript">
    $(document).ready(function () {
        RegisterJQueryFunctions();
    });
</script>

在外部文件中:

function RegisterJQueryFunctions() {
    $('input[type=submit], input[type=button], input[type=reset]').mousedown(function () {

        // Record the original font and BG colors so we can revert back to them in 'delight'
        var originalFont = $(this).css("color");
        var originalBG = $(this).css("background-color");

        $(this).data("originalFont", originalFont);
        $(this).data("originalBG", originalBG);

        $(this).highlightBG();
        $(this).highlightFont();
        

    });
    $('input[type=submit], input[type=button], input[type=reset]').mouseup(function () {
        $(this).revertFont();
        $(this).revertBG();
    });

    $.fn.highlightFont = function (highlightFontColor) {
        var highlightFont = highlightFontColor || "#FFFFFF"; // Defaults to white
        $(this).css("color", highlightFont);
    };

    $.fn.highlightBG = function (highlightBGColor) {
        var highlightBg = highlightBGColor || "#FF7F00"; // Defaults to orange
        $(this).css("background-color", highlightBg);
    };

    $.fn.revertFont = function () {
        var originalFont = $(this).data("originalFont");
        if (!originalFont.length)
            originalFont = "#000000"; // Defaults to black in case data attribute wasn't set properly in highlightFont

        $(this)
            .css("color", originalFont);
    };
    $.fn.revertBG = function () {
        var originalBG = $(this).data("originalBG");

        if (!originalBG.length)
            originalBG = "#FEC800"; // Defaults to orange in case data attribute wasn't set properly in highlightFont
        $(this)
            .css("background-color", originalBG);
    };
}

Answer 1

这就是使用 CSS 的方式。如果您希望按下的外观为以下 CSS

 .pressed { color : #ffffff; background-color : #FEC800; }

那么你的函数就很简单了:

function RegisterJQueryFunctions() {
   $('input[type=submit], input[type=button], input[type=reset]')

      .mousedown(function () { $(this).toggleClass("pressed",true); })

      .mouseup(function () { $(this).toggleClass("pressed",false);  });
}

您可以为不同的输入类型设置不同的按下外观(使用标准 CSS 选择器)。

您将样式与代码分开(总是一件好事。)