javascript - 基于 CSS/Javascript 的图像选择器

Question

所以请原谅我，我才刚刚开始学习 Javascript，我什至不知道这是否可行。我有以下 HTML 代码:

<div class="container">
<div class="topspace">
    <div id="picholder" class="pic1">
        <div class="picsel" id="picsel1" onclick="imgSel(1)"></div>
        <div class="picsel" id="picsel2" onclick="imgSel(2)"></div>
    </div>
</div>
</div>

所以我想要完成的是通过单击其中一个“picsel”div(它们在 picholder div 的底部显示为小方 block )我可以通过更改与picholder 分区我的 Javascript 显示如下:

function imgSel(n) {
var id1 = "pic" + n;
var id2 = "picsel" + n;

// 'zero out' all the picsel boxes to their default color
document.getElementByClass('picsel').style.backgroundColor="#333";
// change the background-image for picholder
document.getElementById('picholder').style.className=id1;
// change the picsel box that was clicked to white
document.getElementById(id2).style.backgroundColor="#FFF";
}

我的 CSS 显示如下:

#picholder {width:798px; height:340px; border:1px solid #333; background-color:#333;}
.picsel {width:8px; height:8px; background-color:#333; border:1px solid #333; margin-left:4px; top:340px; position:relative; float:left;}
.picsel:hover {cursor:pointer; background-color:#888;}
.pic1 {background-image:url('data/main001.jpg');}
.pic2 {background-image:url('data/main002.jpg');}

我已经在其上运行了一个警报并且正在正确添加变量，所以我想我想知道的是，是否可以更改类名(或者甚至是一个命令？)。在这一点上，我想我不能将变量分配给 className=var 或 getElementById(var)，但是......好吧......有它。

它目前正在运行 http://www.mdw-art.com/ ，但在基于 HTML 的版本中，该版本不指示当前显示的是哪个方 block 。所以我基本上希望它这样做，但我试图让方框指示当前显示的是哪一个，并从 HTML 中获取代码(因为我想稍后将同样的概念应用于其他画廊)。

Answer 1

是的，将一个类名添加到所选元素并允许该类的 CSS 为您完成工作，而不是使用 JavaScript 更改内联样式。这样，您只需从元素中删除类名即可取消选择。