javascript - 左右のボタンで連続してボックスを移動

Question

ボタンのクラスを左右に移動しようとすると.popup、左から右、右から左に連続的に移動します..

これがjsフィドルです。

HTML:

<button class="right">Right</button>
<button class="left">Left</button>
<div class="popup">
    Popup
</div>

Answer 1

.popup div の left プロパティを見逃しています

 .popup {
    width: 200px;
    height: 50px;
    border: 1px dashed #000;
    position: absolute;
    top: 100px;
    left:0px;
 }

次のようにスクリプトを改善できます。

$(document).ready(function () {
    var left = parseInt($(".popup").css('left'));
    var refreshIntervalId;
    $(".left").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) + 1);
            left += 5;
            $(".popup").css({"left": left})
        }, 10);
    })
    $(".left").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
    $(".right").on('mousedown', function () {
        refreshIntervalId = setInterval(function () {
            $('#counter').html(parseInt($('#counter').html()) - 1);
            left -= 5;
            $(".popup").css({"left": left});
        }, 10);
    })
    $(".right").on('mouseup', function () {
        clearInterval(refreshIntervalId);
    })
});