改善此行爲：更改按鈕文字/背景onmousedown - 恢復onmouseup

我想看看社區中的任何人是否可以改善此代碼。改善此行爲：更改按鈕文字/背景onmousedown - 恢復onmouseup

目標：應用程序中充滿了輸入元素，它們的樣式看起來像自定義按鈕。它們有各種類型，例如「提交」，「重置」和「按鈕」。當用戶點擊按鈕時（即用鼠標在PC上點擊它或在觸摸屏設備上的正確位置觸摸屏幕，例如黑莓），按鈕文本&背景應該改變以指示按鈕已被按下。文本&背景應該在與按鈕相關聯的動作被執行之前恢復 - 指示按鈕已被釋放。

這是我的解決方案的代碼片段 - 任何人都可以看到改進/ slim/refactor的方法嗎？

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

}

來源

2012-01-05 JTech

這通常是與CSS樣式。 – Hogan 2012-01-05 05:10:00

這是你將如何使用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選擇器）。（總是一件好事）

您從代碼中分離造型

來源

2012-01-05 05:17:23 Hogan

使用CSS（類），可以大大減少你的代碼的大小。其次CSS將提供改變顏色的選項，而不會改變你的JavaScript（主題）。 CSS的唯一目的是爲網站&提供外觀和感覺，爲網站添加動態行爲。

希望這會有所幫助。

來源

2012-01-05 05:08:46

好的霍根 - 感謝您的提示。 – JTech 2012-01-06 04:58:59

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

來源

2012-01-05 05:13:39 nnnnnn

使用上述建議的組合，這是解決方案的結束：

$('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 
     });

來源

2012-02-08 02:33:35 JTech

改善此行爲：更改按鈕文字/背景onmousedown - 恢復onmouseup

回答

相關問題