2012-03-19 3 views
0

저는 jquery와 javascript에 익숙하지 않지만이 코드가 Drupal 웹 사이트에서 작동하도록했습니다. (필요한 Drupal jQuery 호출 코드의 시작과 끝을 포함 시켰습니다. '컨텍스트'부분은 아약스 종류의 기준으로하므로이 새로 고침 작업을 만들면서 참조, 요점은 내가처럼 (지정된 범위 내에서 새로운 임의의 색상을 원하는 것입니다삽입 테두리 효과의 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 발견 (다음 동적으로 생성 된 내 페이지의 각 이미지에 적용됩니다. 추신. 나는 여기 어딘가에서 임의의 색상 생성 코드 스 니펫을 발견했다. 그래서 그 한 사람 덕분에 신용이 떨어지는 것을 원하지 않는다.

따라서 각 이미지에 새로운 클래스를 추가하고 각 클래스에 인세 트 경계 함수를 적용하는 루프를 사용했습니다.

이 코드를보다 효율적으로 최적화 할 수있는 방법이 있는지 궁금합니다. 어떻게해야하는지 알 수있는 유일한 방법이기 때문입니다. 내가이 개 추가 필드에 대해 같은 임의의 배경 색상을 필요에 따라 파 프로그래밍 기술에서

UPDATE를 내을 개선하기 위해 희망 어떤 조언을

건배 및 감사, 나는 코드를 조금 수정 (및 설명 추가) 한 그 당신이 문자열로 'nmbr을'변환합니까 왜 ... 이미지 (제목, 등급)

답변

0

하지 대답하지만, 질문을 통해

을 나타 납니까?

/// 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

실로 당신 말이 맞아요. 변환 할 필요가 없습니다. 고마워요. 언어 간 전환으로 자동으로, 나쁜 습관을 추가했습니다. 하지만 다른 함수를 전달할 때 여전히 변수에 유지해야한다고 생각합니다. –