CSS와 자바 스크립트 이벤트 핸들러를 함께 사용하기

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> 

자바 스크립트 :

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 속성, 값으로 대체하고 있습니다.