如果条件在jquery中不起作用 Jquery赋值 * { 保证金：0；填充：0； } .货柜， .集装箱2{ 宽度：49%；右边框：5px实心#000；浮动：左；框大小：边框框 } .集装箱2{ 边界：无； } .控制{ 填充底部：50px；利润率：10px； } .鲍尔， .鲍尔2{ 边界半径：50%；背景色：#000；宽度：100px；高度：100px；位置：相对位置；左：0； } var n； var w=$（“.container”）.width（）； var b=$（“#ball”）.width（）； var pos=（w-b+‘px’）； $（'#next'）。在（'单击'，函数（）上）{ n=$（“#ball”）.css（“左”）调试器；如果（n_Jquery_If Statement_Conditional Statements

如果条件在jquery中不起作用 Jquery赋值 * { 保证金：0；填充：0； } .货柜， .集装箱2{ 宽度：49%；右边框：5px实心#000；浮动：左；框大小：边框框 } .集装箱2{ 边界：无； } .控制{ 填充底部：50px；利润率：10px； } .鲍尔， .鲍尔2{ 边界半径：50%；背景色：#000；宽度：100px；高度：100px；位置：相对位置；左：0； } var n； var w=$（“.container”）.width（）； var b=$（“#ball”）.width（）； var pos=（w-b+‘px’）； $（'#next'）。在（'单击'，函数（）上）{ n=$（“#ball”）.css（“左”）调试器；如果（n

jquery if-statement

如果条件在jquery中不起作用 Jquery赋值 * { 保证金：0；填充：0； } .货柜， .集装箱2{ 宽度：49%；右边框：5px实心#000；浮动：左；框大小：边框框 } .集装箱2{ 边界：无； } .控制{ 填充底部：50px；利润率：10px； } .鲍尔， .鲍尔2{ 边界半径：50%；背景色：#000；宽度：100px；高度：100px；位置：相对位置；左：0； } var n； var w=$（“.container”）.width（）； var b=$（“#ball”）.width（）； var pos=（w-b+‘px’）； $（'#next'）。在（'单击'，函数（）上）{ n=$（“#ball”）.css（“左”）调试器；如果（n,jquery,if-statement,conditional-statements,Jquery,If Statement,Conditional Statements,我不确定我是否清楚地理解你。但问题是如果你使用边框框，它会使/强制宽度包括边框和填充在n=$（“#球”）.css（“左”）之后放置一个；我已经纠正了这一点，但是没有效果。是的，在宽度中添加了填充，但是jquery条件不起作用。你对此有什么答案吗 <html> <head> <title>Jquery-Assignment</title> <script src="https://ajax.googleapis.com/aja

我不确定我是否清楚地理解你。但问题是如果你使用边框框，它会使/强制宽度包括边框和填充

在

n=$（“#球”）.css（“左”）之后放置一个；

我已经纠正了这一点，但是没有效果。是的，在宽度中添加了填充，但是jquery条件不起作用。你对此有什么答案吗

<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>