Улучшите это: измените текст кнопки / фона на mousedown - вернуться на mmouseup

Question

Хотелось бы посмотреть, сможет ли кто-нибудь из сообщества улучшить этот код.

ЦЕЛЬ: Приложение заполнено элементами ввода, стилизованными под пользовательские кнопки.Они бывают разных типов, например, «отправить», «сброс» и «кнопка».Когда пользователь нажимает кнопку (т. Е. Щелкает ее мышью на ПК или касается экрана в нужном месте на устройстве с сенсорным экраном, например, BlackBerry), текст и фон кнопки должны измениться, чтобы показать, что кнопка была нажата.Текст и фон должны вернуться, прежде чем будет выполнено действие, связанное с кнопкой - чтобы указать, что кнопка была отпущена.

Вот фрагмент кода, который я имею для моего решения - может кто-нибудь увидеть способы улучшения / уменьшения/ 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);
};

}

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)).

Вы отделяете стиль от кода (всегда хорошо.)

Answer 2

Используя CSS (класс), вы можете значительно уменьшить размер вашего кода.Во-вторых, CSS даст возможность изменять цвета без изменения вашего JavaScript (Темы).Единственная цель CSS состоит в том, чтобы придать сайту внешний вид и ощущение, а для javascript добавить динамическое поведение на сайт.

Надеюсь, это поможет.

Answer 3

Используя комбинацию вышеупомянутого совета, это решение в конечном итоге получит:

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

Answer 4

• Если вы используете один и тот же селектор 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");
    };
}