Question

我有一张桌子，每张桌子都有一个最喜欢的选项。我使用了两个明星图像来切换喜欢和不喜欢的。（我没有使用复选框，因为我也想要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.

Answer 2

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

HTML：

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

CSS：

.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;
}

JS：

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

这样你可以减少所需DIV的数量。这是一个快速示例，因此您可以获得图像精灵解决方案的逻辑。如果你想避免jQuery，也可以使用普通的JavaScript，但是我没有看到使用jQuery保持简单的原因。如果你谷歌搜索CSS图像精灵，网上有很多教程。

这个小提琴http://jsfiddle.net/dJBKw/1/使用开/关文字，就像你的例子一样。

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

2 个答案: