Question

我已经看了这个，觉得我非常接近搞清楚，但却无法让它发挥作用。

$(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({
                paddingTop: 5,
                paddingRight: 5,
                paddingBottom: 5,
                paddingLeft: 5

            });

            // animate current title to larger size            
            $el.animate({
                paddingTop: 10,
                paddingRight: 5,
                paddingBottom: 0,
                paddingLeft: 10
            }).next().slideDown();

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


        var theParent = $(this).parent().prev();

            console.log($(this));

            var theClass = theParent.attr("class");

            var theAttribute = $(this).parent().prev().attr("data-type","this");

            theAttribute.attr("class","solo"+theClass); */

            $parentWrap.children().children().animate({
                "height" : "518",
                "width" : "145",
                "opacity": "1.0"
            });

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


            $otherWraps.children().children().animate({
                "height" : "70",
                "width" : "96",
                "opacity" : "0.5"
            });

        $otherWraps.children().attr("class").replace("solo","");        

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

        }

    });

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

});

我正在使用类将此修改中的背景图像更改为infogrid.js。我能够将这些类从人的原始名称改为他们的名字+“solo”，并且工作正常。
一旦不再是选定的“独奏”，问题就是剥离“独奏”。在第97行（如果你在代码编辑器中打开它），我试图将每个类恢复为原始类（每个人的名字 - “omni”）。我花了大约3个小时就完成了这个工作，但还是没能让它工作。任何帮助，将不胜感激。干杯，渣。

Answer 1

听起来像第97行是你的问题，这就是那里发生的事情：

$otherWraps.children().attr("class").replace("solo","");

当您使用attr函数并省略第二个参数时，您将调用该函数的get版本。所以你要检索类名然后修改它，但不要将它重新分配给孩子们。

http://api.jquery.com/attr/

你可能想要的是：

$otherWraps.children ().each (function () {
    var className = $(this).attr ('class');
    $(this).attr ('class', className.replace ('solo', ''));
});

在这里，您将为其提供第二个参数，即函数的set版本。

我将其扩展为上述形式，因为我不知道如果你尝试会发生什么：

$otherWraps.children().attr("class", $otherWraps.children().attr("class").replace("solo",""));

甚至不适合一条线！

通过jquery更改类

1 个答案: