CSSとJavascriptのイベントハンドラを混在させる

Question

同じイベントハンドラをいくつかの異なるdiv要素に割り当てることができます。各要素にはユニークなスタイルがあります。

私はそうのようなイベントハンドラを登録：

<script type="text/javascript"> 

function add_something() { 
    document.getElementById('manipulate').onclick = do_something; 
} 

function do_something(e) { 
this.style.property = value; 
} 

window.onLoad = add_something; 
</script> 

だから私はそうのような要素にイベントハンドラを割り当てることができます。

<div id="manipulate"></div> 

問題は、私はいくつかにそのハンドラを割り当てるということですそれぞれユニークなスタイルの要素があり、私はそれを行うためにCSSを使いたいと思っています。しかし、私はそれを行う方法がわかりません。

<style> 
#element1{...} 
#element1{...} 
#element1{...} 
</style> 

.....

<div id="element1" class="manipulate"></div> 
<div id="element2" class="manipulate"></div> 
<div id="element3" class="manipulate"></div> 

これが可能である：

結局、私はこのようなものをしたいですか？ありがとう

Answer 1

イベント委任？

HTML：

<div id="wrap"> 
    <div id="element1" class="manipulate">First element</div> 
    <div id="element2" class="manipulate">Second element</div> 
    <div id="element3" class="manipulate">Third element</div> 
</div> 

ではJavaScript：

var wrap = document.getElementById('wrap'); 

wrap.onclick = function (e) { 
    var elem = e.target; 

    elem.style.color = 'red'; 
}; 

ライブデモ：http://jsfiddle.net/VLcPw/

Answer 2

最新のブラウザでは、クラスごとに要素を選択することも、jQueryを使用してどこでも動作することがわかります。おそらく、

$(document).ready(function(){ 
    $('.manipulate').click(function(){alert('Hello.')}); 
    //or .hover/any other event. 
}); 

jQuery events.

より関連性の例？

$('.manipulate').click(function(){ 
    $(this).addClass('whateverClass'); 
    //or 
    $(this).css('color', 'red'); 
}); 

Answer 3

は、なぜあなたはjqueryのを試して与えていませんか？

はjQueryを使って、あなたは、これはすべての対応する要素に同じクリックイベントをバインドするために必要なだけのはずです。

    $("div.manipulate").click(function(e) { 
     $(this).css(property, value); 
    }); 

プロパティはもちろん、正しい値で有効なCSSのプロパティ、値に置き換えられています。