Question

我希望能够将相同的事件处理程序分配给许多不同的div元素。每个元素都将具有独特的风格。

我像这样注册了eventhandler：

<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，你应该只需要将相同的click事件绑定到所有相应的元素：



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

当然，

属性必须替换为有效的css属性，值为正确的值。

混合CSS和; Javascript事件处理程序

3 个答案: