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

Question

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

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

<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");
}