0

それぞれにお気に入りのオプションがあるテーブルがあります。2 つの星の画像を使用して、お気に入りと非お気に入りを切り替えました。（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>

ジャバスクリプト:

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

オン/オフ状態に星の画像を使用する場合は、画像スプライト (星の 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/は、例のようにオン/オフテキストを使用します。

于 2013-10-30T11:01:42.797 に答える