如果条件在jquery中不起作用

时间:2015-02-06 07:52:06

标签: jquery if-statement conditional-statements

<html>

<head>
    <title>Jquery-Assignment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container,
        .container2 {
            width: 49%;
            border-right: 5px solid #000;
            float: left;
            box-sizing: border-box
        }
        .container2 {
            border: none;
        }
        .controls {
            padding-bottom: 50px;
            margin: 10px;
        }
        .ball,
        .ball2 {
            border-radius: 50%;
            background-color: #000;
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="controls"> <span><a href="#" id="prev"><img src="arrow-prev.png"/></a></span> <span><a href="#" id="next"><img src="arrow-next.png"/></a></span> </div>
            <div class="ball-path">
                <div class="ball" id="ball"></div>
            </div>
        </div>
        <div class="container2">
            <div class="controls"> <span><a href="#" id="prev"><img src="arrow-prev.png"/></a></span> <span><a href="#" id="next"><img src="arrow-next.png"/></a></span> </div>
            <div class="ball-path">
                <div class="ball" id="ball"></div>
            </div>
        </div>
    </div>
    <script>
        var n;
        var w = $(".container").width();
        var b = $("#ball").width();
        var pos = (w - b + 'px');
        $('#next').on('click', function() {
            n = $("#ball").css("left") debugger;
            if (n <= pos) {
                $("#ball").animate({
                    left: '+=20'
                }, 1);
            } else {
                $("#ball").animate({
                    left: '+=0'
                }, 1);
            }
        });
        $('#prev').on('click', function() {
            n = $("#ball").css("left") if (n == '0px') {
                $("#ball").animate({
                    left: '-=0'
                }, 1);
            } else {
                $("#ball").animate({
                    left: '-=20'
                }, 1);
            }
        });
    </script>
</body>

</html>

注意:左侧位置增加20px;因此,如果容器的宽度是600或620或640然后它工作,但当我使用盒子大小属性然后变成像615px因为边框是5 px。然后较小的条件不起作用。请为此提出任何答案。

如果任何身体无法忍受上述词语,请添加并删除盒子大小属性。

1 个答案:

答案 0 :(得分:0)

我不确定我是否清楚地理解你。但问题是如果你使用border-box,它会强制/强制宽度包括border&amp; padding