2012-04-10 4 views
1

私はCSSでバスシートの配置を設計しようとしていますが、CSSでホバーセクションを完成させましたが、次の部分はになります。をクリックしてバックグラウンドイメージを変更します。 私は各座席に異なるIDを使用しています。次のコードを使用します。CSSを使ったOnclick関数

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

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

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

+1

を渡すことで、特定の座席をクリックしてください –

+1

[jQuery](http://jquery.com)を試してみてください。あなたがあなたのHTMLマークアップのサンプルを投稿した場合には、 – fragmentedreality

+1

はより良いでしょう...($ this ')要素w1が(スパン/ div /何か他のhtml要素)であることを知っていると、答えが少し難しくなります。また、クリックイベントが最初に正しく発射されていることを確認していますか? – optimusprime619

答えて

1

を持っているでしょう。これは、多くのクリック可能な座席があり、それぞれが一意のIDを持つと言われるので便利です。クリック可能なシート( "w1"、 "w2"など)ごとに手動でイベントハンドラを作成するのではなく、どのシートにも一致するセレクタを使用する方が簡単です。すべての席は、ID「席」でタグ内にあると仮定し、各座席は「」タグで表現されている。さらに、

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

:だからあなたのマークアップはこのようなものになるだろう

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

、ユーザーが代わりにaddClassのtoggleClassを使用し、それを選択解除するために、再度シートをクリックできるようにしたい場合:あなたはこのすべてを実装するためにjqueryのを使用する必要はありません

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

注意を。あなたは生のjavascriptでそれを行うことができますか、または別のjavascriptフレームワークを使用することができます。しかし、選択肢があれば、jqueryはこれをもっと簡単にコーディングします。

+0

あなたの提案を試してみた ' jQueryの知識がないため結果を得ることができませんでした。 –

+0

これを試してください: '

0

jQuery which allows easily this kind of thingの使用をお勧めします。 $(this)を使用することにより、あなたは自動的にクリックされた要素を参照してください、ということ

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

注:あなたのケースでは、あなたはjQueryのを使用している場合、これは同じように簡単かもしれない

$("#w1").addClass("myClass"); 
0
function changeImage(this){ 
    var el; 
    el.classname = 'updatedImgClass'; 
} 

トリガー上記の機能私たちは、あなたが `working`ないとはどういう意味ですか?それのオブジェクト

関連する問題