Question

我使用此代码制作滑块功能。

$(function() {
$(".slider").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {
        if (ui.position.left > 200) {
            $(".well").fadeOut(500, function(){
            $( ".well" ).delay(1000).addClass( "disappear" );
            $( ".showup" ).delay(500).removeClass( "disappear" );
            });
        } else {
            // $("h2 span").css("opacity", 100 - (ui.position.left / 5))
        }
    },
    stop: function(event, ui) {
        if (ui.position.left < 201) {
            $(this).animate({
                left: 0
            })
        }
    }
});

$('.slider')[0].addEventListener('touchmove', function(event) {
    event.preventDefault();
    var el = event.target;
    var touch = event.touches[0];
    curX = touch.pageX - this.offsetLeft - 40;
    if(curX <= 0) return;
    if(curX > 200){
        $('.well').fadeOut();
        $(".well").addClass( "disappear" );
        $('.well').add('<h2>Erbjudandet använt</h2>');
    }
    el.style.webkitTransform = 'translateX(' + curX + 'px)'; 
}, false);

$('.slider')[0].addEventListener('touchend', function(event) {  
    this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
    this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
    this.style.webkitTransform = 'translateX(0px)';
}, false);

});

这是我用于显示滑块的HTML：

return  "<link rel='stylesheet' href='http://www.infid.se/wp-content/themes/simplemarket/anvandstyle.css'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='http://www.infid.se/wp-content/themes/simplemarket/slidetounlock.js'></script>
<div id='page-wrap'>
    <div class='showup disappear'><h2>Erbjudande använt</h2></div>
        <div class='well'>
            <h2><strong class='slider'></strong> <span>Använd erbjudande</span></h2>
        </div>
</div>";

这里的问题是我有大约100个滑块，当滑块被激活时（“消失”类使它消失，并且h2被添加），它们全部消失。有没有办法让“消失”类只影响当前项目？

Answer 1

您需要选择相对于当前滑块的元素，然后进行更改。

    $('.well').fadeOut();
    $(".well").addClass( "disappear" );
    $('.well').add('<h2>Erbjudandet använt</h2>');

到

    $well = $(this).closest('.well');  //Select only the respective well element.
    $well.fadeOut();
    $well.addClass( "disappear" );
    $well.add('<h2>Erbjudandet använt</h2>');
    .....
    $well.prev(".showup").delay(500).removeClass( "disappear" );

同样，您可以在适用的其他事件中更改此内容。

$(".slider").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {
        if (ui.position.left > 200) {
            var $well  = $(this).closest('.well');
            $well.fadeOut(500, function(){
            $well.delay(1000).addClass( "disappear" );
            $well.prev(".showup").delay(500).removeClass( "disappear" );
            });
        } else {
            // $("h2 span").css("opacity", 100 - (ui.position.left / 5))
        }
    },
    stop: function(event, ui) {
        if (ui.position.left < 201) {
            $(this).animate({
                left: 0
            })
        }
    }
});

$('.slider')[0].addEventListener('touchmove', function(event) {
    event.preventDefault();
    var el = event.target;
    var touch = event.touches[0];
    curX = touch.pageX - this.offsetLeft - 40;
    if(curX <= 0) return;
    if(curX > 200){
         var $well  = $(this).closest('.well');
        $well.fadeOut();
        $well.addClass( "disappear" );
        $well.add('<h2>Erbjudandet använt</h2>');
    }
    el.style.webkitTransform = 'translateX(' + curX + 'px)'; 
}, false);

<强> Fiddle

jQuery addClass只影响当前项

1 个答案: