在选择用户图像时更改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背景

回答

相关问题