프로토 타입과 함께 작동하도록 jQuery를 변환하십시오.

Question

프로토 타입과 함께 작동하도록 변환하는 다음 jQuery 코드가 있습니다.

P. 세상에! 게시물에 코드 섹션을 설명하는 데 필요한 컨텍스트가 많지 않습니다. 귀하의 시나리오를보다 명확하게 설명하십시오.

$(function() { 

    // Set up variables 
    var $el, $parentWrap, $otherWrap, 
     $allTitles = $("dt").css({ 
      padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5 
      "cursor": "pointer" // make it seem clickable 
     }), 
     $allCells = $("dd").css({ 
      position: "relative", 
      top: -1, 
      left: 0, 
      display: "none" // info cells are just kicked off the page with CSS (for accessibility) 
     }); 

    // clicking image of inactive column just opens column, doesn't go to link 
    $("#page-wrap").delegate("a.image","click", function(e) { 

     if (!$(this).parent().hasClass("curCol")) {   
      e.preventDefault(); 
      $(this).next().find('dt:first').click(); 
     } 

    }); 

    // clicking on titles does stuff 
    $("#page-wrap").delegate("dt", "click", function() { 

     // cache this, as always, is good form 
     $el = $(this); 

     // if this is already the active cell, don't do anything 
     if (!$el.hasClass("current")) { 

      $parentWrap = $el.parent().parent(); 
      $otherWraps = $(".info-col").not($parentWrap); 

      // remove current cell from selection of all cells 
      $allTitles = $("dt").not(this); 

      // close all info cells 
      $allCells.slideUp(); 

      // return all titles (except current one) to normal size 
      $allTitles.animate({ 
       fontSize: "14px", 
       paddingTop: 0, 
       paddingRight: 0, 
       paddingBottom: 0, 
       paddingLeft: 0 
      }); 

      // animate current title to larger size    
      $el.animate({ 
       "font-size": "20px", 
       paddingTop: 0, 
       paddingRight: 0, 
       paddingBottom: 0, 
       paddingLeft: 0 
      }).next().slideDown(); 

      // make the current column the large size 
      $parentWrap.animate({ 
       width: 320 
      }).addClass("curCol"); 

      // make other columns the small size 
      $otherWraps.animate({ 
       width: 128 
      }).removeClass("curCol"); 

      // make sure the correct column is current 
      $allTitles.removeClass("current"); 
      $el.addClass("current"); 

     } 

    }); 

    $("#starter").trigger("click"); 

}); 

모든 도움을 주시면 감사하겠습니다.

Answer 1

Prototype과 jQuery를 모두 사용하려면 을 사용하여 $ 변수를 Prototype에 다시 할당하고 두 웹 사이트를 동일한 웹 사이트에서 사용할 수 있습니다.