Javascript if/else 语句不起作用，但是里面的代码就像我在没有 if/else 的情况下测试过的那样答案

【问题标题】：Javascript if/else statement isnt working however the code inside does as i have tested without the if/elseJavascript if/else 语句不起作用，但是里面的代码就像我在没有 if/else 的情况下测试过的那样
【发布时间】：2016-04-25 12:35:30
【问题描述】：

基本上，我尝试创建一个 if else 语句来检查 div 的宽度，然后根据结果扩展或收缩我内部的 iframe。它们在运行代码本身时没有问题，只是 if/else 语句，因为我已经在没有 if/else 的情况下测试了里面的代码

可以在http://l3mmydubz.onhub.online找到网站

代码：

Javascript：

var sc = document.getElementById("scfullscreen");
var sccount = 0;
$(document).ready(function() {
$(sc).click(function() {
sccount= sccount+1;
if (sccount%2 === 0) {
    animateFn('20%','80%');
    $('#soundcloud').animate({
            left: '20%',
            width: '80%',
        }, 1000);

} else {
    animateFN('0%','20%');
    }
});
});

function animateFn(l, w){
    $('#soundcloud').animate({
            left: l,
            width: w,
        }, 1000);
    $('#scfullscreen').animate({
            left: l,
            width: w,
        }, 1000);
    $('#scexpand').addClass('rotated');
}

html:

<!doctype html>
<html>

<head>
    <title>L3mmy Dubz</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery.js" type="text/javascript"></script>
    <script src="animation.js" type="text/javascript"></script>
</head>

<body>
    <div id="header"></div>
    <a href="index.html">
        <div id="homebtn" class="btn">Home</div>
    </a>
    <div id="musicbtn" class="btn">Music</div>
    <iframe id="soundcloud" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/19690125&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
    <div class="btn" id="scfullscreen">
        <img id="scexpand" height="100%" alt="fullscreen" src="images\plus.png" />
    </div>

</body>

</html>

CSS：

* {
margin:0px;
border:0px;
padding:0px;
}
body {
background-color:#B22800;
height:100%;
width:100%;
}
#header {
position:fixed;
left:0px;
width:20%;
height:100%;
background-color: #7C1C00;
opacity:0.9;

}
.btn {
position:fixed;
line-height:200%;
text-overflow:clip;
display: block;
overflow: hidden;
white-space: nowrap;
height:7.5%;
width:20%;
color:white;
Font-size:2em;
text-align:center;
}
.btn:hover {
background-color:#ff3a00;
}
#homebtn{
top:0%;
}
#musicbtn{
top:7.5%;
}
#header a {
text-decoration:none;
color:#fff;
}

#soundcloud {
width:20%;
height:77.5%;
position:fixed;
left:0px;
top:15%;
}
#scfullscreen {
bottom:0px;
display:block;
position:fixed;
overflow: hidden;
white-space: nowrap;
height:7.5%;
left:0px;
width:20%;
}
#scfullscreen:hover {
background-color:#ff3a00;
}
.rotated {
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */
}
@media screen and (max-width:768px) {
#header {
    width:30%;
}
#soundcloud {
    width:30%;
}
#scfullscreen {
    width:30%;
    left:0px;
}
}

【问题讨论】：

请提供足够的代码，包括基本的 html/css 以重现此问题
styel.left 的值不是数字而是字符串，如"100px" 不能使用条件。您应该先将其转换为整数：if(parseInt(sc.style.left,10) > 0)
感谢您的帮助，不胜感激
抱歉，我已经更新了我的问题

标签： javascript html css if-statement width

【解决方案1】：

也考虑干掉你的代码。

var sc = document.getElementById("scfullscreen");
$(document).ready(function() {
$('#scfullscreen').click(function() {
    var l= parseInt(sc.style.left,10);
    if (l > 0) {
        animateFN('0%','20%');

    } else {
        animateFn('20%','80%');
        });
    }
});
});
});

 function animateFn(l, w){
        $('#soundcloud').animate({
                left: l,
                width: w,
            }, 1000);
        $('#scfullscreen').animate({
                left: l,
                width: w,
            }, 1000);
        $('#scexpand').addClass('rotated');
}

【讨论】：

谢谢你现在就试试 :)
由于某种原因，它仍然无法正常工作，很抱歉给我带来了不便，因此它会检查宽度，而不是这里是我让它上线的网站，因此可以对其进行检查 l3mmydubz.onhub.online
试试 var l= parseInt(sc.style.left);如果 (l > 0) {