根据位置显示或隐藏图像（图像滑块）

Question

我已经设置并工作了一个图像滑块，现在我需要根据滑块内元素的位置显示或隐藏图像。

展望萤火虫，我可以看到以下内容（请注意，有几个项目里，我只是在这里展示一个）：

<li class="roundabout-moveable-item" style="position: absolute; left: 128px; top: 104px; width: 185.9px; height: 188.1px; opacity: 1; z-index: 145; font-size: 8.3px;">

现在，取决于该“左”位置，我希望能够执行以下操作：

if left > 400px then add a class which will show image one,
if left < 300px then add a class which will show image two,
if left >= 300px and <= 400px then add a class which will show no image

非常感谢所有帮助。 我对JQuery还是很陌生，但到目前为止，我在想：

var left = $("li.roundabout-moveable-item").position.left;
$("li.roundabout-moveable-item").addClass("no-image");
if(left < 300px) {
    $('li.roundabout-moveable-item").addClass("image-one");
}
elseif(left > 400px) {
    $('li.roundabout-moveable-item").addClass("image-one"); 
}
else {
    $('li.roundabout-moveable-item").addClass("no-image");
}

谢谢

Answer 1

只需从代码中删除“ px”并纠正语法即可。 我认为您需要这样的东西：

var left = $(".roundabout-moveable-item").position.left;
if(left < 300) {
$(".roundabout-moveable-item").addClass("image-one");
}
else if(left > 400) {
$(".roundabout-moveable-item").addClass("image-two"); 
}
else {
$(".roundabout-moveable-item").addClass("no-image");
}