Question

我正在尝试在拖动时更改元素类或任何css property，它取决于元素位置。所以这就是我到目前为止所得到的：

因此当元素通过窗口的一半时它会改变，但是当它到达窗口宽度的末尾时它不会改变它应该。这就是我的问题。

HTML

<div id="sun" class="yellow"></div>
<div class="position"></div>
<div class="window"></div>

JS

var sun = $("#sun");

sun.draggable();

$("#sun").bind("drag", function(event, ui) {
    var halfWidth = $(window).width() / 2;
    var left = $(this).offset().left + 100;
    var windowWIdth = $(window).width() - 200;

    $('.position').html(left);
    $('.window').html(windowWIdth);

    if(left > halfWidth) {
        sun.removeClass('yellow');
        sun.addClass('red')
    } else if (left == windowWIdth) {
        sun.removeClass('red');
        sun.addClass('black')
    }

});

我实际上是想在这里创建一些其他问题的答案。

Answer 1

问题出现在＆＃34; if else＆＃34;声明。通过中点后，您将始终进入第一个if语句。你应该删除＆＃34;否则＆＃34;一句话，一切都会运作良好

 if(left > halfWidth) {
    sun.removeClass('yellow');
    sun.addClass('red')
}


if (left == windowWIdth) {
        sun.removeClass('red');
        sun.addClass('black')
    }

这是一个工作示例：fixed solution

<强>更新：为了使它能在所有方向上工作，你应该在if else语句中添加另一个术语：

if(left < halfWidth) {
    sun.addClass('yellow');
    sun.removeClass('red')
} else
if(left > halfWidth && left <= windowWIdth) {
    sun.removeClass('black')
    sun.removeClass('yellow');
    sun.addClass('red')
} else
if (left >= windowWIdth) {
    sun.removeClass('red');
    sun.addClass('black')
}

这是一个工作示例：updated solution

拖动时更改元素类

1 个答案: