Запустить событие после вызова .css () (сохранение текущего стиля)? - PullRequest
Новая
       35

Запустить событие после вызова .css () (сохранение текущего стиля)?

1 голос
/ 03 февраля 2012

Ситуация : мой плагин jQuery позволяет мне передать функцию, которая будет выполнена, если возвращаемый объект (из вызова ajax) содержит свойство error. В этой функции можно установить свойства css(), чтобы выделить ошибку. В коде параметр isError используется для имитации этого.

Проблема : когда плагин вызывается два раза подряд и успех после ошибки , конечно, стиль не меняется и $(this).html("Success") показывает жуткий красный текст .

Вопрос : есть ли способ выполнить событие после вызова .css(), сохраняя текущий стиль для его последующего восстановления (только при успехе)? 

<div id="container"></div>
<script>
      $('#container').attach({}, true);  // First call is error
      $('#container').attach({}, false); // Second call is success
</script>

Это (часть) моего плагина: 

(function($) {
   $.fn.attach = function(options, isError) {

      var opt = $.extend({
         onError : function(message) { // Default function for errors
            this.html('Error: ' + message + '.').css('color', 'red');
        }
      }, options);

      // Loop each selection item
      this.each(function() {

         if(isError) // An error occurred, call opt.onError
         {
            opt.onError.call($(this), "Message");
            return true; // End of the current element process
         }

         $(this).html("Success"); // No errors, set success text

      });

   };
})(jQuery);

Ответы [ 3 ]

1 голос
/ 03 февраля 2012

Другой и более простой путь может заключаться в работе с классами, а не хранит старый класс.если есть ошибка, назначьте класс ошибки.Используйте .addClass(), чтобы отметить состояние ошибки, и в случае успеха используйте .removeClass, чтобы удалить класс ошибки, если он присутствует.Если его нет, jQuery просто движется без ошибок.

1 голос
/ 03 февраля 2012

Но, подумав об этом, на мой взгляд, более разумным подходом было бы позволить пользователю определить и обратный вызов onSuccess, а вместо использования. css позволить пользователю определить два класса для успеха и ошибки чехол и установить их на элемент.

Пример: 

(function($) {
   $.fn.attach = function(options, isError) {

      var opt = $.extend({
         onError : function(message) { // Default function for errors
            $(this).html('Error: ' + message + '.');
        },
        onSuccess: function(message) {
            $(this).html('Success');
        },
        errorClass: 'error',
        successClass: 'success'
      }, options);

      // Loop each selection item
      this.each(function() {

         var method = 'onSuccess',
             cssClass = 'successClass';


         if(isError) // An error occurred, call opt.onError
         {
            method = 'onError';
            cssClass = 'errorClass';
            return true; // End of the current element process
         }

         opt[method].call(this, 'Message');
         $(this).removeClass(cssClass === 'successClass' ? opt.errorClass : opt.successClass)
                .addClass(opt[cssClass]);    
      });
   };
})(jQuery);

Обратите внимание, что я также изменяю call($(this),...) на call(this, ...), чтобы обратные вызовы вели себя так же, как традиционные обратные вызовы.

Тем не менее, чтобы ответить на поставленный вопрос: чтобы позволить css вызвать событие, вы можете обернуть функцию следующим образом: 

(function($) {
    var orig_css = $.fn.css;
    $.fn.css = function() {
        var result = orig_css.apply(this, arguments);
        if(arguments.length === 2) { // CSS property was set
            $(this).trigger('css_changed'); // or whatever event you want to trigger
        }
        return result;
    };
}(jQuery));

DEMO

0 голосов
/ 03 февраля 2012

Вы можете сделать функцию-обертку для .css(), которая делает это.

Ваша функция, .mycss(), будет довольно простой.Вы берете стиль, который хотите установить в качестве параметра, например .css().Вы записываете текущий CSS с .data(), чтобы вы могли получить его позже.Затем вы используете .css() как обычно, чтобы установить нужный стиль.

Вы можете сделать вторую функцию .resetcss(), чтобы проверить данные, связанные с выбранным элементом, и установить эти данные в качестве вашего CSS.Или вы можете свернуть эту функцию в .mycss(), чтобы он сохранял / устанавливал CSS, если вы передали параметр стиля, и восстанавливал CSS, если вы отправляете его без параметра.

Ваши точные потребности могут немного отличаться, но выможет изменить функцию (и) для удовлетворения этих потребностей.Возможно, вы захотите проверить сохраненные данные стиля, прежде чем устанавливать новые данные и решить, вернетесь ли вы к старому стилю или используете новый.В качестве альтернативы, если вы используете классы CSS (хороший выбор), вы можете вместо этого создать функцию .myclass(), которая будет хранить ваш предыдущий класс и устанавливать новый класс, что позволит вам получить его позже вместо этого.

...