Использование JQuery для изменения порядка элементов

Question

Кто-нибудь знает, что я делаю не так?Я пытаюсь изменить порядок отображения некоторых изображений. Я хочу, чтобы изображения смещались вправо / влево на одно место при каждом нажатии кнопки.Это то, что я пытался, но не повезло.

Любая помощь или понимание будут по-настоящему оценены

Answer 1

Если вы хотите, чтобы это работало как карусель, которая вращается (последнее изображение становится первым, когда вы перемещаетесь вправо), то я бы так и сделал:

$("#rightShift").click(function(){
    $("img:last").detach().insertBefore("img:first");
});

$("#leftShift").click(function(){
    $("img:first").detach().insertAfter("img:last");
});

Answer 2

Вы пытаетесь сослаться на переменную внутри строки. Это не имеет смысла.
Вы на самом деле имели в виду:

$("img:eq(" + indexImg + ")").show();

Но более эффективная реализация:

$(this).prev().show();

Наиболее эффективная реализация без побочных эффектов:

$("#rightShift").click(function(){
    var $images = $("img"); // <-- Reference to all images
    $images.hide();
    //var count = $images.length; //<-- Unused variable, delete it?
    $images.each(function(i) { 
        $(this).prev().show();
    });
}); 
$("#leftShift").click(function() {
    var $images = $("img");
    $images.hide();
    $images.last().prependTo("img"); // OR: $images.before($images.last());
    $images.show();
});

Answer 3

Это:

$("img:eq(indexImg)").show();

Должно быть так:

$("img:eq(" + indexImg + ")").show();

Не уверен, что другие вещи не так.