javascript - 一系列切换 div(n 个像复选框一样切换的两个 div)-JS

Question

我有一张 table ，每个人都有一个最喜欢的选项。我使用了两个星图来在最喜欢和不最喜欢之间切换。 (我没有使用复选框，因为我也想要 IE8)。

我想出了下面的例子。

HTML

<div class="on" id="on_1" onclick="div_off(this.id);" style="display:none">off</div>
<div class="off" id="off_1" onclick="div_on(this.id);">on</div>
<div class="on" id="on_2" onclick="div_off(this.id);" style="display:none">off</div>
<div class="off" id="off_2" onclick="div_on(this.id);">on</div>
<div class="on" id="on_3" onclick="div_off(this.id);" style="display:none">off</div>
<div class="off" id="off_3" onclick="div_on(this.id);">on</div>
<div class="on" id="on_4" onclick="div_off(this.id);" style="display:none">off</div>
<div class="off" id="off_4" onclick="div_on(this.id);">on</div>

CSS

<style>
  .on, .off {
    cursor: pointer;
  }
  .on{
    color: red;
  }
  .off{
    color: blue;
 }
</style>

JS:

<script>
        function div_on(onId){
            onId = onId.replace('off_','');
            var on = document.getElementById('on_'+onId);
            var off = document.getElementById('off_'+onId);
            on.style.display = "block"
            off.style.display = "none"

        }
        function div_off(offId){
            offId = offId.replace('on_','');
            var on = document.getElementById('on_'+offId);
            var off = document.getElementById('off_'+offId);
            on.style.display = "none"
            off.style.display = "block"
        }
    </script>

有没有其他简单的方法来做同样的事情。我试图避免任何 js 类/jquery。

例子: http://jsfiddle.net/yellowandred/LZkVb/1/

Answer 1

这个怎么样？我还提供了一个关于如何获取被点击元素的 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>

JavaScript:

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

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

CSS:

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

JSFiddle here.

Browser support for these JavaScript properties.