0

我有一张桌子，每个人都有一个最喜欢的选择。我使用了两个星图在最喜欢和不喜欢之间切换。（我没有使用复选框，因为我也想要 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/

4

2 回答 2

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在这里。

浏览器对这些 JavaScript 属性的支持。

于 2013-10-30T10:55:40.540 回答
1

如果您希望将星形图像用于开/关状态，我将创建一个图像精灵（包含两个星形图像的图像）并将其用作 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/像你的例子一样使用开/关文本。

于 2013-10-30T11:01:42.797 回答