我无法让我的jQuery识别if语句。请看看 CodePen
我的网站内有4个页面转换。页面右侧，左侧页面，页面向上和向下翻页。联系页面位于主要英雄部分下方。上下过渡使接触部分上下滑动到视野中。问题是，如果用户打开并点击页面右侧或左侧，我希望联系页面向下滑动。我在视图中添加了一个if语句来查询联系人div的marginTop值，但它没有响应。
可以在上面的CodePen链接中查看以下内容。
$(document).ready(function() {
// if statement that is not working but not sure why???
if ($('.contact-wrapper').css("marginTop") == '-10%') {
$('#down').trigger('click');
}
// --------------------------------------------
$('#pg-right').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '-=100%'
}, 500);
});
$('#pg-left').click(function() {
$('.home-wrapper, .about-wrapper').animate({
marginLeft: '+=100%'
}, 500);
});
$('#up').click(function() {
$('.contact-wrapper').animate({
marginTop: '-=10%'
}, 500);
});
$('#down').click(function() {
$('.contact-wrapper').animate({
marginTop: '+=10%'
}, 500);
});
}) .home-wrapper {
position: fixed;
background: blue;
height: 90vh;
left: 0;
width: 100%;
}
.about-wrapper {
position: fixed;
background: green;
height: 90vh;
width: 100%;
left: 100%;
}
.contact-wrapper {
position: fixed;
background: black;
height: 80vh;
width: 100%;
left: 0;
top: 90%;
}
#pg-right,
#pg-left,
#up,
#down {
position: fixed;
font-size: 3em;
color: white;
}
#pg-right {
top: 10%;
left: 80%;
}
#pg-left {
top: 10%;
left: 20%;
}
#up {
top: 50%;
left: 60%;
}
#down {
top: 50%;
left: 40%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="home-wrapper"></div>
<div class="about-wrapper"></div>
<div class="contact-wrapper"></div>
<a href="#" id="pg-right">Right</a>
<a href="#" id="pg-left">Left</a>
<a href="#" id="up">Up</a>
<a href="#" id="down">Down</a>
答案 0 :(得分：0)
感谢@Xufox指出我正确的方向。问题是jQuery if语句以像素为单位进行评估，而我使用的是％。我解决这个问题的方法是将字符串转换为Integer值，然后查询它是否小于零。请参阅下面的代码以及更新后的CodePen。
var x = $('.contact-wrapper').css("marginTop")
if( parseInt(x) < 0) {
$('#down').trigger('click');
}