1

私はCSSでバスの座席配置をデザインしようとしています.CSSでホバーセクションを完成させましたが、次の部分はクリック後に背景画像に変化があるはずの座席を選択することです. 座席ごとに異なるIDを使用しています。次のコードを使用する

.myClass {
    background:url('images/transparent-backgro-seatlayout.gif') 0 -60px;
}

document.getElementById("w1").className += " myClass";

しかし、これは機能していません。Javaスクリプトについてよく知らないので、問題を解決できません。親切に助けてください。

4

3 に答える 3

1

jQueryを使用する場合、これは次のように簡単になります。

$("#w1").click(function() {
  $(this).addClass('myClass');
});

$（this）を使用すると、クリックされた要素が自動的に参照されることに注意してください。クリック可能なシートが多数あり、それぞれに一意のIDがあるため、これは便利です。クリック可能なシート（「w1」、「w2」など）ごとにイベントハンドラーを手動で作成する代わりに、任意のシートに一致するセレクターを使用する方が簡単です。すべての座席がID「seats」のタグ内にあり、各座席が「a」タグで表されていると仮定します。

$("#seats a").click(function() {
  $(this).addClass('myClass');
});

したがって、マークアップは次のようになります。

<div id="seats">
  <a id="w1">seat 1</a>
  <a id="w2">seat 2</a>
  ....
</div>

さらに、ユーザーがシートをもう一度クリックして選択を解除できるようにする場合は、addClassの代わりにtoggleClassを使用します。

$("#seats a").click(function() {
  $(this).toggleClass('myClass');
});

これらすべてを実装するためにjqueryを使用する必要はないことに注意してください。生のJavaScriptでそれを行うことも、別のJavaScriptフレームワークを使用することもできます。しかし、選択肢があれば、jqueryを使用するとこれをはるかに簡単にコーディングできます。

于 2012-04-10T06:27:26.003 に答える
0

この種のことを簡単に行えるjQueryの使用をお勧めします。あなたの場合、あなたは

 $("#w1").addClass("myClass");
于 2012-04-10T06:27:04.927 に答える
0 
function changeImage(this){
   var el;
   el.classname = 'updatedImgClass';
}

オブジェクトを渡して特定の座席をクリックすると、上記の関数がトリガーされます

于 2012-04-10T12:24:55.407 に答える