Javascript 切换div系列（n个像复选框一样切换的两个div）-JS

我有一张桌子，他们每个人都有一个最喜欢的选择。我使用了两个星星图像在“收藏”和“非收藏”之间切换。（我没有使用复选框，因为我也想要IE8）

我想出了下面的例子

HTML

关闭
在…上
关
在…上
关
在…上
关
在…上

CSS

.开，.关{
光标：指针；
}
.在{
颜色：红色；
}
.关{
颜色：蓝色；
}

JS:

功能分区开启（onId）{
onId=onId.replace（'off_'，''）；
var on=document.getElementById（'on_u'+onId）；
var off=document.getElementById（'off_u'+onId）；
on.style.display=“块”
off.style.display=“无”
}
功能分区关闭（offId）{
offId=offId.replace（'on_'，''）；
var on=document.getElementById（'on_uu'+offId）；
var off=document.getElementById（'off_u'+offId）；
on.style.display=“无”
off.style.display=“块”
}

还有其他简单的方法可以做到这一点吗。我试图避免使用任何js类/jquery

例如：

---

这个怎么样？我还提供了一个关于如何获取单击元素ID的示例

HTML:

<div class="off" id="toggle1" onclick="toggle(this);">off</div>
<div class="off" id="toggle2" onclick="toggle(this);">off</div>
<div class="off" id="toggle3" onclick="toggle(this);">off</div>
<div class="off" id="toggle4" onclick="toggle(this);">off</div>

function toggle(el) {
    var newState = (el.className === "off") ? "on" : "off";

    el.className = newState;
    el.innerHTML = newState;
    alert("\"" + el.id + "\" is now " + newState + "!");
}

.on, .off {
    cursor: pointer;
}
.on {
    color: red;
}
.off {
    color: blue;
}

CSS:

<div class="off" id="toggle1" onclick="toggle(this);">off</div>
<div class="off" id="toggle2" onclick="toggle(this);">off</div>
<div class="off" id="toggle3" onclick="toggle(this);">off</div>
<div class="off" id="toggle4" onclick="toggle(this);">off</div>

function toggle(el) {
    var newState = (el.className === "off") ? "on" : "off";

    el.className = newState;
    el.innerHTML = newState;
    alert("\"" + el.id + "\" is now " + newState + "!");
}

.on, .off {
    cursor: pointer;
}
.on {
    color: red;
}
.off {
    color: blue;
}

---

如果您希望在开/关状态下使用星形图像，我将创建一个图像精灵（包含两个星形图像的图像），并将其用作div中的背景图像。然后使用CSS类控制背景图像的位置。例如：

HTML:

JS:

这样，您就可以将所需的div数量减半。这是一个快速的示例，您可以了解图像精灵解决方案的逻辑。 如果您想避免jQuery，也可以使用纯JavaScript，但我看不出为什么jQuery不能保持简单。 如果你用谷歌搜索CSS图像精灵，网上有很多教程

---

这个提琴像你的例子一样使用开/关文本。

你只是想切换文本吗？我使用的是css精灵

<div id="star1" class="star"></div>
<div id="star2" class="star"></div>

.star {
   width: 20px;
   height: 20px;
   background-image: url("img/starsprite.png");
   background-size: 20px 40px; /*We assume that the sprite contains a 20x20 px star in off state above a 20x20 px star in on state. Notice that the background is bigger than the div */
   background-position: 0px 0px;
   cursor: pointer;
}
.star.on {
   background-position: 0px 20px;
}

$('body').on('click', '#star', function(event) {
   var $this = $(this);
   if($this.hasClass('on')) {
      $this.removeClass('on');
   }
   else {
      $this.addClass('on');
   }
});