2012-03-19 1 views
0

Я не так разбираюсь в jquery и javascript, но мне удалось получить этот код для моего сайта Drupal (я включил начало и конец требуемого кода вызова jQuery для Drupal для ссылка, как «контекст» часть делает работу с Ajax освежающие там так как ссылки рода, не стесняйтесь игнорировать)Оптимизация jQuery динамическое добавление эффекта границы вставки

(function ($) { 
Drupal.behaviors.borderfarba = { 
    attach: function (context, settings) { 

     var nmbr = 1; /// this will be a counter 
     var backcolor; /// here I store the generated random color 
     $(".movierow", context).each(function() { 

      /// I declare a class + a number from the counter 
      var clrclass = "clr" + nmbr; 

      /// I add this class to each .movierow class 
      /// which is inside a div containing divs with the other classes 
      $(this).addClass(clrclass); 

      /// storing the random color 
      backcolor = get_random_color(); 

      /// pass the class and color value to function 
      addborder(clrclass, backcolor); 

      /// up the counter 
      nmbr++; 
     }); 


     function addborder(clrclass, backcolor) { 
      /// before the inset border effect I also 
      /// apply the backcolor to a title and rating field 
      /// that appear over the image 

      $("." + clrclass + " .views-field-field-screenrate").css("background", backcolor); 
      $("." + clrclass + " .screentitle").css("background", backcolor); 

      /// apply the inset border effect 
      $("." + clrclass + " img").insetBorder({ 
       borderColor: backcolor, 
       inset: 5 
      }); 
     } 

     /// randomization functions 
     function rand(min, max) { 
      return parseInt(Math.random() * (max - min + 1), 10) + min; 
     } 

     function get_random_color() { 
      var h = rand(40, 130); 
      var s = rand(30, 75); 
      var l = rand(40, 60); 
      return 'hsl(' + h + ',' + s + '%,' + l + '%)'; 
     } 

     /// add a nice slide down/up effect 
     /// on mouse in/out for the title 
     $(".movierow").hover(
     function() { $(this).children(".screentitle").slideDown(); }, 
     function() { $(this).children(".screentitle").slideUp(); } 
     ); 

    } 
}; 

})(jQuery); 

Дело в том, я хочу новый случайный цвет в определенном диапазоне (например, в мой случай от красноватых оттенков до зеленого), примененный к эффекту границы вставки jQuery, найденный here, который затем применяется к каждому изображению на моей странице (которые генерируются динамически). PS. Я думаю, что я нашел случайный фрагмент кода генерации цвета где-то здесь, поэтому благодаря тому, что один человек, не хочу, чтобы кредит там, где он не должен.

Таким образом, я использовал цикл, который добавляет новый класс к каждому изображению, а затем применяет функцию границы вставки к каждому классу.

Мне интересно, есть ли способ оптимизации этого кода, чтобы быть более эффективным, поскольку это единственный способ, которым я решил, как это сделать.

Приветствие и спасибо за любые советы, в надежде улучшить свой под номинальными навыками программирования

UPDATE Я изменили код немного (и добавили комментарии), как мне нужен тот же случайный цвет фона для 2-й дополнительных полей, появляются над изображением (название, рейтинг)

ответ

0

не ответ, но вопрос ...

Почему вы преобразовать «NMBR» в строку?

/// I declare a class + a number from the counter 
    var clrclass = "clr" + nmbr.toString(); 
    /// I add this class to each .movierow class 
    /// which is inside a div containing divs with the other classes 
    $(this).addClass(clrclass); 

Не будет ли проще? ...

$(this).addClass('clr'+nmbr); 

В противном случае, ваш код выглядит очень производительным для меня, но я далек от эксперта.

+0

Действительно, вы правы, мне не нужно конвертировать, спасибо. Добавлено автоматически, плохая привычка переключиться между языками. Но я думаю, что мне все равно нужно держать его в переменной, поскольку я передаю его другим функциям. –