-5

我不知道我的代码有什么问题。即使我使用live函数，jQuery 也会忽略我添加的所选类。

这是一个小提琴。

$('.rap').each(function () {
    $(this).click(function () {
        $(this).addClass('selected');
        $(this).removeClass('rap')
        $(this).animate({
            'left': 0,
            'width': '600px'
        });
        $(this).css('z-index', '10');
        $(this).find('.boxs').animate({
            'left': 0
        });
    });
});

$('.selected').live("click", function () {
    alert('s');
    $(this).removeClass('selected');
    $(this).addClass('rap');
    $(this).parent().animate({
        'left': '200px',
        'z-index': 0,
        'width': '200px'
    });

    $(this).animate({
        'left': '-200px'
    });
});
4

4 回答 4

2

改用.on()：

$(document).on("click", ".selected", function () {
    alert('s');
    $(this).removeClass('selected');
    $(this).addClass('rap');
    $(this).parent().animate({
        'left': '200px',
        'z-index': 0,
        'width': '200px'
    });

    $(this).animate({
        'left': '-200px'
    });
});

.live()在 jQuery 1.7 中已弃用并在 1.9 中删除，因此您应该使用.on().

此外，来自 jQuery 文档：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上

这就是为什么您不应该将它绑定到document稍后要添加的类的原因。

于 2013-06-06T15:54:56.953 回答
2

live()方法已弃用。

利用on()

$(document).on("click", ".selected", function () {
   //do stuff
}

请参阅在 jQuery 中，如何将事件附加到动态 html 元素？

于 2013-06-06T15:55:31.940 回答
1

我认为你为自己把事情复杂化了。我冒昧地更改了您的 HTML 和 CSS，因此我可以编写一个简单的 jQuery 脚本，它基本上可以满足您的需求。

HTML：

<div class="wrapper">
    <div class="boxs panel1"></div>
    <div class="boxs panel2"></div>
    <div class="boxs panel3"></div>
</div>

CSS：

.wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 600px;
}
.boxs {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    z-index: 0;
}

.panel1 {
    background-color: blue;
    left: 0;
}
.panel2 {
    background-color: red;
    left: 200px;
}
.panel3 {
    background-color: yellow;
    left: 400px;
}

jQuery：

var boxes = $('.boxs'),
    collapse = function (i) {
        $(boxes[i]).css('z-index', 10).on('click', expand);
        boxes.animate({left: '200px'});
    },
    expand = function () {
        var t = $(this);
        $(boxes[0]).animate({left: 0});
        $(boxes[2]).animate({left: '400px'}, function () {
            t.css('z-index', 0);
            t.off('click', expand);
        });
    };
boxes.each(function (i) {
    $(this).on('click', function () {
        collapse(i);
    });
});

演示

我希望这有帮助。

于 2013-06-07T09:52:12.110 回答
0

我找到了解决这个问题的解决方案。不过我需要改变整个事情：就是这样。

面板幻灯片（）

function panelSlides() {
    var panelNo = $('.panel-item').length;
    //var panelNo = $('.panel-item').length;
    var panelContainerWidth = $('.panel-wrapper').width();
    //var panelContainerWidth = $('#block-views-main-panels-main-panels').width();

    //alert(panelNo);
    //alert(panelContainerWidth);


    var panelWidthPercentRaw = ((panelContainerWidth / panelNo) / panelContainerWidth) * 100;
    var panelWidthPercent = Math.round(((panelContainerWidth / panelNo) / panelContainerWidth) * 100) + '%';

    $('.panel').width(panelContainerWidth);// Get the panels occupy the whole width of the container

        $('.panel-item').each(function() {
            var panelPercentPos = Math.round(($(this).index() * panelWidthPercentRaw)) + '%' ;
            //var panelPosRaw = $(this).index() * panelWidth + 'px';

            $(this).width(panelWidthPercent);// Specify the divided width of each panel wrapper in percent; 
            $(this).css('left',panelPercentPos);// position each wrapper to the page


            $(this).click(function() {

                var toggleWidth = $(this).width() == panelContainerWidth ? panelWidthPercent : panelContainerWidth;
                var togglePos = $(this).css('left') > '0px' ? "0%" : panelPercentPos;// adjust wrapper width

                $(this).animate({ 
                    width: toggleWidth,
                    left:togglePos
                    });

                $('.panel-item').css('z-index',10);
                $(this).css('z-index',100);
            });

        });
};//function closed

这是演示：http: //jsfiddle.net/euG63/

于 2013-06-21T04:14:43.347 回答