Question

我正在尝试使用next和back按钮创建div滑块。当你到达div s的末尾时，下一个按钮会消失，反之亦然。我的问题是，当我按下下一个按钮时，滑块功能正常，但是当我立即按下后退按钮时，它会向后滑动div，但不会减少当前的div计数器。它改为1。现在，如果我再次点击它，它会减少当前div并正常运行。

的jQuery

var div_name = "1";
var current_div = 1;
var first_run = true;

$(function(){

    function scrollToNextAnchor(aid){
        // if this is the first time you've pressed the next button
        if (first_run == true) {
            $(".back").css('display','block');  //display the back button
            current_div = 2; //set the current div to 2
            first_run = false; //set first run to false
        }
        else {
            $(".back").css('display', 'block'); //display the back button
        }
        console.log("Current Div: " + current_div); //output to log

        var aTag = $("a[name='"+ aid +"']");  
        $('body').animate({
            scrollLeft: aTag.offset().left
        }, "slow",  //perform slide animation
        function() { 
            //this is where I need to put the .attr stuff
            var next_div = "#id" + (current_div + 1); //set next button to next div
            var prev_div = "#id" + (current_div - 1); //set back button to previous div

            if (current_div == 5) { //if you're on the last div
                $(".forward").css('display', 'none'); //remove the next button
                $(".back").attr('href', "#id4"); //make the back button the previous            current_div = 4; // set the current div to 4
            }
            else { 
                $(".forward").attr('href', next_div); //set next button to next div
                $(".back").attr('href', prev_div); //set back button to previous div
                current_div++;  //increment div by 1
            }
        });
    };

    function scrollToPrevAnchor(aid){
        $(".forward").css('display', 'block');  // display the next button
        console.log("Current Div: " + current_div); //output to console
        var aTag = $("a[name='"+ aid +"']");
        $('body').animate({
            scrollLeft: aTag.offset().left
        }, "slow", //perform animation
        function() { 
            //this is where I need to put the .attr stuff
            var next_div = "#id" + (current_div + 1); //set next button to next div
            var prev_div = "#id" + (current_div - 1); //set back button to previous div
            if(current_div == 1) { //if you're on the first div
                $(".back").css('display', 'none'); //remove the back button
            }
            else {  
                $(".forward").attr('href', next_div); //set next button to next div
                $(".back").attr('href', prev_div); //set back button to previous div
                current_div--; //decrease current div by 1
            }
        });
    };

    $(".forward").click(function() { //click the next button
        var div_name = $(this).attr("href");
        scrollToNextAnchor(div_name);
    });

    $(".back").click(function() { //click the back button
        var div_name = $(this).attr("href");
        scrollToPrevAnchor(div_name);
    });
});

HTML

<div class="next">
    <span style="font-size:48px;">
        <a class="forward" href="#id2">&nbsp;></a>
    </span>
</div>
<div class="prev">
    <span style="font-size:48px;">
        <a class="back" style="display:none;">&nbsp;<</a>
    </span>
</div>

Answer 1

我的问题是，当我按下下一个按钮时，滑块功能正常，但是当我立即按下后退按钮时，它会滑回一个div，但不会减少当前的div计数器。

这是因为您在完成动画时完成/ {递增current_div计数器，而不是立即。 .animate()方法采用以下参数：

.animate( properties [, duration ] [, easing ] [, complete ] )

也许您还应该在调用另一个动画之前调查动画元素上的.stop()。

以下是两个快速小提示，展示incrementing on animation complete和cancelling the previous animation and incrementing immediately之间的差异，我希望他们提供一些见解。

jquery div滑块无法正常工作

1 个答案: