在選擇用戶圖像時更改div背景

我有div，thumbwrap1，它在選擇圖像時改變顏色，但我感到困惑的是當用戶選擇另一個圖像時如何去除當前選定div的背景？在選擇用戶圖像時更改div背景

 <script type="text/javascript"> 

     function doOnChannelLoad(e) { 

    if (e.mediaList && e.mediaList.length > 0) { 

     var playlistHTML = ""; 

     for (var i = 0; i < e.mediaList.length; i++) { 
     var media = e.mediaList[i]; 
     if (media) { 
      playlistHTML += '<div id="thumbwrap">'; 
      playlistHTML += '<div id="thumbwrap1" onClick="javascript:myFunction(this);">'; 
      playlistHTML += '<a href="javascript:onPlaylistItemClick(\'' + media.id + '\');">'; 
      playlistHTML += '<img width="105" border "1" src="' + media.thumbnailUrl + '"/ >'; 
      playlistHTML += '</div>'; 
      playlistHTML += '<div id="thumbwrap-title">' + media.title + '</div>'; 
      playlistHTML += '</a>'; 
      playlistHTML += '</div>'; 
     } 
     } 

     playlistHTML += '<br style="clear:both;" />'; 

     var playlistBox = document.getElementById('playlist-box').innerHTML = playlistHTML; 
     drawBorder(e.id); 

    } 

    } 

    function onPlaylistItemClick(mediaId) { 

    DelvePlayer.doSetMedia(mediaId, false); 

    } 

    function onChannelListClick(channelId) { 

    DelvePlayer.doLoadChannel(channelId); 

    } 

    function drawBorder(elementId) { 

    $('li').removeClass('channelSelected'); 
    document.getElementById(elementId).setAttribute("class", "channelSelected"); 

    }

函數myFunction的（divObj）{

divObj.style.background="#E79F2C"; 
$(this).remove(divObj);

}

感謝。

來源

2013-10-09 Don Abbot

從JavaScript生成的HTML無效。您正在使用與'thumbwrap'相同的'ID'創建多個'DIV'。首先糾正一樣。 – anupam

如果您需要對多個元素進行相同的樣式設置，則應該使用class屬性，而不是id屬性。如果你還使用了一個（說）'active'類，你可以簡單地將這個類應用到最近點擊的元素上，而將其從其他元素中清除。 for循環將生成具有相同id的多個元素：「thumbwrap」，「thumbwrap1」和「thumbwrap-title」。任何給定id的多個元素都會導致html無效。 – enhzflep

當用戶點擊它時，thumbwrap1會改變圖像周圍的背景顏色，從白色到橙色。這就是我想要的，但是當我點擊另一張圖像時，我希望先前選擇的圖像的橙色背景變回無背景，新選擇的圖像變成橙色。我不完全確定你的意思。你知道一個網站可以參考代碼示例嗎？謝謝。 –

我終於得到了這個工作的權利。解決方案：

var highlightLink = function() { 
     var active = null, colour = '#FF8C00'; 
     if (this.attachEvent) this.attachEvent('onunload', function() { 
      active = null; 
     }); 
     return function (element) { 
      if ((active != element) && element.style) { 
       if (active) active.style.backgroundColor = ''; 
       element.style.backgroundColor = colour; 
       active = element; 
      } 
     }; 
    }();

感謝大家的幫助。在這個過程中肯定會學到很多東西。

來源

2013-10-12 20:24:27

在選擇用戶圖像時更改div背景

回答

相關問題