2013-10-27 70 views
0

我有了這個codepen -開關選擇圖像與jQuery

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

當你選擇一個圖像寫一些文字,然後點擊「預覽」用圖片和文字燈箱映入眼簾。

我的問題是,如果用戶然後關閉燈箱並選擇不同的圖像,然後出現兩個圖像。我不想在關閉燈箱時刪除文本/圖像(這是最簡單的選擇)。

另外我注意到,如果您單擊選擇按鈕幾次它'中斷',並給出一個藍色背景w /單詞選擇。不知道如何解決這個問題。

任何幫助將非常感激。

在此先感謝。

編輯,添加代碼(不這樣做的道歉開頭)...

代碼的類添加到選定的圖像,這給出了一個藍色背景的字「選擇」和克隆圖像轉換成不同的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; 
    }); 

有了這兩個我需要弄清楚如何改變選擇或選擇如果我點擊兩次相同的元素,則刪除「選定」類。另外,如果我單擊一個圖像,然後單擊另一個圖像,則要交換附加的圖像,刪除第一個圖像並用新選擇替換它。

我希望在週日早上有意義。

+0

有關您編寫的代碼問題的問題必須描述具體問題 - 並在問題本身中包含有效代碼以再現它 - **。請參閱http://SSCCE.org獲取指導。 –

回答

0

您正在使用appendTo()這很有可能將圖像附加到燈箱而不是更新它。嘗試使用attr("src")來更新來源,而不是追加新來源。