-1

重複の可能性:
純粋な JavaScript でクラスを削除/追加する解決策は何ですか?

最初に、単純な JavaScript の質問のように見えることを許してください。私は言語を理解し始めたばかりです。クラスまたは ID によるコンテンツの表示と非表示に関する多数の投稿を見てきましたが、それらはすべて一度に 1 つずつ適用されるようです。一度に 3 つのクラスを変更したいと思います。表示の変更は、ユーザーがどのリンクをクリックする準備ができているかによって異なります。わかりにくい説明ですが、コードを使用した私の例を以下に示します。

すべてにクラスが割り当てられている一連のサムネイルで画像ギャラリーを構築しています。.photo、.printおよび.logo。4 つの「ボタン」が必要です。写真、プリント、ロゴ、ディスプレイすべて。ユーザーが「写真」をクリックすると、コードは .photo を に、.logo を に設定display:blockし.printますdisplay:none。ユーザーが「印刷」をクリックすると、コードは .print をdisplay:blockに、.photo および .logo を に設定しdisplay:noneます。ユーザーが「ロゴ」をクリックすると、コードは .logo をdisplay:blockに、.photo および .print を に設定しdisplay:noneます。そして明らかに、ユーザーが「すべて表示」をクリックすると、すべてのクラスが に設定されdisplay:blockます。

<div id="menu">
<ul class"toplevel">
<li id="photoselect"><a href="photo.html">Photography</a></li>
<li id="logoselect"><a href="logo.html">Print</a></li>
<li id="printselect"><a href="print.html">Logo</a></li>
</ul>
</div>
<div id="content">
<a href="photo/photo01.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo06.jpg"></a>
</div>
4

2 に答える 2

1

または、css3（それをサポートするブラウザ用）を利用することもできます

<!doctype html>
<html>
<head>
<style>
#content > input.hidden{ display:none; }
#content > a{ display:none; }
#po:checked ~ a.photo{ display:block; }
#pi:checked ~ a.print{ display:block; }
#lo:checked ~ a.logo{ display:block; }
#al:checked ~ a{ display:block; }
</style>
</head>
<body>
<div id="menu">
<ul class"toplevel">
<li><label for="po">Photography</label></li>
<li><label for="pi">Print</label></li>
<li><label for="lo">Logo</label></li>
<li><label for="al">All</label></li>
</ul>
</div>
<div id="content">
<input type="radio" name="bfc" id="po" class="hidden" />
<input type="radio" name="bfc" id="pi" class="hidden" />
<input type="radio" name="bfc" id="lo" class="hidden" />
<input type="radio" name="bfc" id="al" class="hidden" />
<a href="photo/photo01.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo06.jpg"></a>
</div>
</body>
</html>
于 2013-01-06T18:22:13.827 に答える
0

ライブラリなしで（および投稿したHTMLを使用して）それを行う方法のアイデアを提供するために、これについての基本的な方法を次に示します。

  1. clickイベントに応答するリンクにイベント リスナーを追加します。
  2. クリックすると、一致するすべての要素を調べて、スタイルを変更します

クリックするたびにクエリを実行する必要がないように、 photos printsandをキャッシュすることをお勧めします。logos

var content = document.getElementById('content'); 
var photos = content.getElementsByClassName('photo');
var prints = content.getElementsByClassName('print');
var logos = content.getElementsByClassName('logo');

function changeDisplay(elements, display) {
  var i = 0, l = elements.length;
  for( ; i < l; i++) {
    elements[i].style.display = display;
  }
}

document.getElementById('photoselect').addEventListener('click', function (e) {
  changeDisplay(prints, 'none');
  changeDisplay(logos, 'none');
  changeDisplay(photos, 'block');
}, false);
于 2013-01-06T18:37:53.313 に答える