jQuery if 语句条件答案

【问题标题】：JQuery if statement conditionsjQuery if 语句条件
【发布时间】：2012-02-21 17:17:10
【问题描述】：

我有一个函数可以通过操作左侧的值来水平滑动 div。一切正常我可以让它左右滚动就好了，我遇到的问题是我相信我的 if 语句并阻止它滚动。我正在测量 div 的左值，并且我知道它应该根据 div 和屏幕测量值移动的下限和上限。但即使左值远大于任一方向的限制，它也不会停止滚动。此外，第一个 if 语句测试面板是否甚至隐藏并需要滚动，这就是 panelWidth 和 portWidth 变量的用途。不确定我的变量是否没有更新或什么，有什么建议吗？提前谢谢。

JQuery 代码

function portfolioSlider() {

var portWidth = $(window).width()-440;
var panelsWidth = panels * 221;
var portDifference = panelsWidth - portWidth;

if (panelsWidth < portWidth) {
}

else if(panelsWidth > portWidth) {

    var leftPosition = $('#web').css('left').replace(/[^-\d\.]/g, '');
    var upperLimit = 220;
    var lowerLimit = 220 - portDifference;
    var hoverInterval;

    if(leftPosition >= lowerLimit, leftPosition <= upperLimit) {

        $(".arrow_right").css('display','block').css('opacity','1')
        $(".arrow_left").css('display','block').css('opacity','1')          
        $(".arrow_right").hover(
            function() {
                hoverInterval = setInterval(
                function() {
                    $('#web').css('left','-=2');
                    leftPosition = $('#web').css('left').replace(/[^-\d\.]/g, '');
                },10);
            },
            function() {
                clearInterval(hoverInterval);
            }
        );
        $(".arrow_left").hover(
            function() {
                hoverInterval = setInterval(
                function() {
                    $('#web').css('left','+=2');
                    leftPosition = $('#web').css('left').replace(/[^-\d\.]/g, '');
                },10);
            },
            function() {
                clearInterval(hoverInterval);
            }
        );          
    }       
    else {
    }       
};
};

portfolioSlider()

HTML 真的无关紧要，它只是一个带有图像面板的 div，效果很好。再次感谢您的任何建议。

【问题讨论】：

标签： jquery variables if-statement

【解决方案1】：

为什么不使用 jQuery.animate()？你可以很容易地做类似的事情

$(".arrow_right").hover(
    function() { this.animate("left", animateTo); },
    function() { this.animate("left", animateFrom); }
);

【讨论】：

div 的整个动画和滑动工作正常，我更关心在不再满足条件时让函数和 if 语句实际停止工作。我将其设置为在滚动时显示左侧值，并且变量根据滚动方式而变化。问题是，一旦左侧值超过指定的最大值或最小值，即使您离开热点并回到热点，它也会继续滚动。
这就是为什么我建议使用 jquery animate 函数为您制作动画。可能会发生很多您可能没有注意到的事情（包括转换 css 像素值（您可以使用 parseInt 执行此操作），您的 Intervals 可能没有被重置，css 值在您不希望它们时被更改，等等)。

【解决方案2】：

这个

 if(leftPosition >= lowerLimit, leftPosition <= upperLimit) {

不是有效的 Javascript。

你的意思是布尔AND吗？

 if(leftPosition >= lowerLimit && leftPosition <= upperLimit) {

即用数学符号表示：lowerLimit <= leftPosition <= upperLimit

【讨论】：