改进:更改mousedown上的文本/背景按钮-revert on mouseup

Improve This: Change button text/background onmousedown - revert onmouseup

本文关键字：按钮 背景 -revert on mouseup 文本 更改 mousedown 改进      更新时间：2023-09-26

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

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

以下是我为我的解决方案准备的代码片段——有人能找到改进/slim/rebuild的方法吗？

<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);
    };
}

这就是使用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选择器）提供不同的按压外观。

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

使用CSS（class），您可以大幅减少代码的大小。其次，CSS将提供在不更改javascript（主题）的情况下更改颜色的选项。CSS的唯一目的是给网站的外观和感觉&对于javascript，向站点添加动态行为。

希望这能有所帮助。

  • 如果多次使用相同的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");
    };
}

使用以上建议的组合，这就是最终的解决方案：

$('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
      });
相关文章：