Javascript 根据用户图像选择更改div背景
我有一个div,thumbwrap1,它在选择一个图像时会改变颜色,但我搞不清楚的是,当用户选择另一个图像时,如何删除当前选定div的背景Javascript 根据用户图像选择更改div背景,javascript,Javascript,我有一个div,thumbwrap1,它在选择一个图像时会改变颜色,但我搞不清楚的是,当用户选择另一个图像时,如何删除当前选定div的背景 <script type="text/javascript"> function doOnChannelLoad(e) { if (e.mediaList && e.mediaList.length > 0) { var playlistHTML = "";
<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");
}
}
谢谢。从JavaScript生成的HTML无效。您正在创建多个
DIV
,其ID
与thumbwrap
相同。首先纠正同样的错误。如果您需要为许多元素设置相同的样式,那么应该使用class属性,而不是id属性。如果您还使用了一个类(比如“active”),您可以简单地将该类应用于最近单击的元素,同时将其从其他元素中清除。for循环将生成具有相同id的多个元素:thumbwrap
、thumbwrap1
和thumbwrap title
。超过1个具有任何给定id的元素会导致无效html。当用户单击图像时,thumbwrap1会将图像周围的背景颜色从白色更改为橙色。这是我想要的,但是当我点击另一张图片时,我希望先前选择的图片的橙色背景变回无背景,而新选择的图片是橙色的。我不能完全肯定你的意思。你知道有一个网站可以参考代码示例吗?谢谢。@Dawnabot-谢谢你的解释。这或多或少是我所认为的,标记的目的是(is)。这里有一个简单的例子来说明我的意思。div是动态添加的,只需右键单击其中一个并选择“Inspect Element”-您可以看到每个div都有类“square”,最后一个要单击的div也有类“active”。我只是得到拥有类“active”的元素列表。我将活动类从任何拥有它的平铺中移除,然后为单击的div切换“活动”类。链接:谢谢你的示例链接。
divObj.style.background="#E79F2C";
$(this).remove(divObj);