переключатель Выбранное изображение с JQuery

Question

Я получил эту codepen -

http://codepen.io/sturobson/pen/3f1cd0077301489290d9e5a6e40077b7

При выборе изображения написать текст и нажмите «Предварительный просмотр» лайтбокса с изображением и текстом приходит в поле зрения.

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

Также я заметил, что если вы нажмете кнопку выбора несколько раз, она «ломается» и дает синий фон с выбором слова. Не знаете, как это исправить.

Любая помощь была бы действительно оценена.

Заранее спасибо.

редактировать, добавлять код (извинения за не делать этого, чтобы начать с) ...

Код для добавления класса к выбранному изображению, это дает синий фон на слово «выбрать» и клоны изображение в другой DIV

$('.selectable-image').on("click", function() { 
    $('.selectable-image.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
     $(".previewimage img").remove(); 
     $(".selected > img").first().clone().appendTo(".preview-image"); 

    return false; 
    }); 

Этот код изменяет слово для выбора или выбирается в зависимости от нажатия

$('.selectable-image').on("click", function() { 
    $('.select-photo', this).text(function(_, oldText) { 
     return oldText === 'SELECTED' ? 'SELECT' : 'SELECTED'; 
    }).parent().siblings().find('.select-photo').text(function(){ 
     return $(this).data('text'); 
    }) 
    return false; 
    }); 

с этими двумя я должен выяснить, как изменить удалите класс «selected», если я дважды щелкнул один и тот же элемент. Также я хочу поменять образ, добавленный, если я нажму на него, а затем выберите другой, удалив первое изображение и заменив его новым выбором.

Надеюсь, это имеет смысл в воскресенье утром.

Answer 1

Вы используете appendTo(), что, скорее всего, добавляет изображение в лайтбокс, а не обновляет его. Попробуйте использовать attr("src") для обновления источника, а не добавления нового.