4

我在制作简单的水平滑块时遇到了问题。使用左右箭头 (img)，位置变为 -100% 或 +100%，效果很好！:) 当滑块在 -400% 时，右箭头应该消失，但是当我使用 jquery 来检查这个时，什么也没有发生？此外，当左箭头位于 0% 时，它应该会消失。

这是我的代码：

$('.right img').live('click', function(){
    $('.play').stop(true, true).animate({
        marginLeft: "-=100%"
    }, 1000);
$('.left img').css("visibility", "visible")
if($('.play').css("margin-left")="400%") {
    $('.right img').css("visibility", "hidden")     
    }
});

$('.left img').live('click', function(){
    $('.play').stop(true, true).animate({
        marginLeft: "+=100%"
    }, 1000);

if($('.play').css('margin-left')=='-2520px'){           
    $('.right img').css("visibility", "visible")
}
else if($('.play').css("margin-left")=0) {
    $('.left img').css("visibility", "hidden")
}
});

当我使用 px 而不是 % 时，它可以工作！但是对于响应式代码，我想使用 %.

对不起我的英语不好:) 谢谢你的时间！！

4

2 回答 2

1

==在比较数值时使用。

=是赋值运算符，而不是比较运算符。

并且 jQuery css 属性返回像素而不是百分比，所以在这种情况下最简单的是使用 JavaScript：

if(document.getElementsByClass('play').style.marginLeft == "400")
于 2013-12-23T18:04:45.183 回答
0

您正在使用分配而不是比较：

if($('.play').css("margin-left")="400%") {

应该：

if($('.play').css("margin-left")=="400%") {

和

else if($('.play').css("margin-left")=0) {

应该：

else if($('.play').css("margin-left")==0) {

除此之外，它仍然是一种意大利面条式的西方方式来做你想做的事情，但这对于理解为什么事情在应该消失的时候没有消失等等还有很长的路要走……

我对任何溢出隐藏的建议，使用绝对定位而不是边距。但我离题了...

于 2013-01-25T03:58:28.600 回答