系列的切換div（n個切換像複選框的兩個div） - JS

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'); 
    } 
}); 

這種方式，你需要減半的資料覈實的數量。這是一個快速示例，因此您可以獲得圖像精靈解決方案的邏輯。 如果你想避免使用jQuery，也可以使用普通的JavaScript，但是我沒有看到使用jQuery保持簡單的原因。 如果你是谷歌的CSS圖像精靈，網上有很多教程。

這個小提琴http://jsfiddle.net/dJBKw/1/使用像你的例子一樣的開/關文本。