-5

コードの何が問題なのかわかりません。jQuery は、関数を使用しているにもかかわらず、追加した選択したクラスを無視しliveます。

ここにフィドルがあります。

$('.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 に答える