Question

我有以下jQuery代码，我想将其转换为使用原型。

P.S。我的天啊！你的帖子没有太多的上下文来解释代码部分;请更清楚地解释一下你的情景。

$(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，你可以使用jQuery's no confilct将$变量的使用重新分配回Prototype，你可以在同一个网站上使用它们。

转换jQuery以使用原型

1 个答案: