Как я могу дублировать элемент изображения li в ul на второй ul при "действии"?

#html #duplicates

#HTML #дубликаты

Вопрос:

Я работаю над проектом, который содержит список изображений в неупорядоченном списке, и я подумал, что было бы неплохо иметь возможность выполнить действие, которое дублировало бы элемент списка и добавляло его во второй неупорядоченный список. По сути, это означало бы создание списка избранных при сохранении исходного списка.

Я довольно новичок в html, поэтому я не уверен, как я мог бы добиться этого. Буду признателен за любую помощь.

1. Довольно просто с JOuery .

2. @PM77-1 Я тоже только изучаю jQuery. Не могли бы вы привести пример? Я пытался сделать что-то вроде этого: if (e.ctrlKey){ $('.menu').attr('id', selectId); selectId.clone(true).appendTo('.favMenu ul'); }

3. Если вы хотите запустить свое действие нажатием на одно из изображений, вам нужно добавить прослушиватели событий ко всем вашим исходным изображениям.

4. @PM77-1 Я понял это, спасибо. Вы знаете, как я могу избежать дублирования элемента списка во второй раз? Например, если щелкнуть изображение, оно добавляется в меню избранного. Как я могу избежать возможности добавления его несколько раз?

Ответ №1:

Вот весь JSFiddle (без реальных изображений) на чистом JS.

Я реализовал исключение дубликатов с помощью for цикла внутри следующей функции:

 function copyToFavorites(event) {
    var image = event.srcElement;
    var src = image.src;
    var dup;

    // determine if it's a duplicate
    var ul = document.getElementById("fav");
    var images = ul.getElementsByTagName("img");
    for (var i = 0; i < images.length;   i) { 
        dup = (images[i].src === src);
        if (dup) {
            break;
        }    
    }
    // if not a duplicate - add to favorites
    if (! dup) {
        var li = document.createElement("li");
        var newImg = document.createElement("img");
        newImg.src = src;
        li.appendChild(newImg);
        ul.appendChild(li);
    } else {
        alert("This ismage is already in Favorites");
    }
}

Не смог придумать ничего более элегантного.

1. Большое спасибо. В конечном итоге я придумал нечто подобное. Вот оно: $(document).ready(function(){ $('.menu').find('a').click(function(e){ var selectName = $(this).attr('name'), selectId = $(this).attr('id'); if (e.which == 2){ $(".favMenu").append('<li>' $(this).html() '</li>'); } }); }); Ваш код определенно делает больше, чем мой, поскольку проблема дублирования была той, которую я не решил. Однако я обнаружил, что не смог отредактировать css для этих дублированных элементов, например, чтобы у них была зеленая граница.

Ответ №2:

Вы можете добиться этого с помощью javascript, jQuery или любой другой помощи. Проверьте этот пример с помощью jQuery. В примере есть только текст, но он будет идеально работать с любым содержимым внутри тега li. http://goo.gl/bplTrm