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将提供更改颜色的选项，而无需更改您的javascript（主题）。 CSS的唯一目的是为网站提供外观和感觉。对于javascript，请向网站添加动态行为。

希望这有帮助。

Answer 2

这就是你用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选择器）。

您正在将样式与代码分开（总是一件好事。）

Answer 3

如果你多次使用相同的jQuery选择器，你应该缓存第一个jQuery对象返回并重用它
如果你在同一个jQuery对象上调用几个jQuery方法，你可以链接它们
我不喜欢一次性使用变量：如果只为一个变量赋值放置和该值仅用于一个（其他）地方，然后您不需要它
如果使用.data()（或.attr()或其他几种jQuery方法）设置多个值，则可以通过将属性放在地图中来完成所有操作

所以：

function RegisterJQueryFunctions() {
    $('input[type=submit], input[type=button], input[type=reset]').mouseup(function () {
        $(this).revertFont().revertBG();
    })
    .mousedown(function () {    
        // Record the original font and BG colors so we can revert back to them in 'delight'
        var $this = $(this);

        $this.data({"originalFont" : $this.css("color"),
                      "originalBG"   :, $this.css("background-color")
        })
        .highlightBG()
        .highlightFont();
    });

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

    $.fn.highlightBG = function (highlightBGColor) {
        $(this).css("background-color", highlightBGColor || "#FF7F00";); 
    };

    $.fn.revertFont = function () {
        var $this = $(this);
        // Defaults to black in case data attribute wasn't set properly in highlightFont
        $this.css("color", $this.data("originalFont") || "#000000");
    };
    $.fn.revertBG = function () {
        var $this = $(this);
        // Defaults to orange in case data attribute wasn't set properly in highlightFont
        $this.css("background-color", $this.data("originalBG") || "#FEC800");
    };
}

Answer 4

结合使用上述建议，最终解决方案是：

$('input[type=submit], input[type=button], input[type=reset]')
  .mousedown(function () { $(this).toggleClass("pressed", true); })
  .mouseup(function () { $(this).toggleClass("pressed", false); })
  .focusout(function () { $(this).toggleClass("pressed",false);  });

$('a,a>*')
  .mousedown(function () { $(this).toggleClass("pressed",true); })
  .mouseup(function () { $(this).toggleClass("pressed", false); })
  .focusout(function () {
      $(this).toggleClass("pressed", false);
      $(this).children().toggleClass("pressed", false); // call explictily because some elements don't raise the 'focusout' event
      });

改进此：更改按钮文本/背景onmousedown - 恢复onmouseup

4 个答案: