Question

我喜欢以面向对象的方式处理DOM，以便我可以拥有高度重复的结构并对特定部分执行操作。例如，说我有这个：

<div class='clickable'>This is Div1
   <div class='attr1'>Hello there</div>
   <div class='attr2'>Foo-Bar</div>
</div>

<div class='clickable'>This is Div2
   <div class='attr1'>Hello there</div>
   <div class='attr2'>Foo-Bar</div>
</div>

然后我有一些javascript说，所有div'类'clickable'都运行这个函数：

function wasClicked(e){
   //just some magic so that 'clicked' references the whichever div was clicked
   var clicked = var sender = (e && e.target) || (window.event && window.event.srcElement);
   $(clicked).children('.attr1').css('background-color','blue')
}

所以现在，如果点击了“clickable”类的任何div并且它有一个类'attr1'的子div，那么'attr1'div将具有它的背景颜色变化。 这只会发生在被点击的一个div上。

我喜欢使用这个“不要重复自己的原则”，但是有更清洁的方法吗？我不认为DOM的class属性应该用于此目的。我偶然会不小心创建两个同一个级别的子div。 $(clicked).children.('attr1')...只是丑陋。

必须有更好的方法。

Answer 1

$(".clickable").click(function (e){
    var clicked=this; // this is the magic
    ... //rest of your code
});

Answer 2

如果您对使用class属性犹豫不决，为什么不试试Data Attributes。

您的代码将变为：

function wasClicked(e){
   //just some magic so that 'clicked' references the whichever div was clicked
   $(this).children('[data-attr1]').css('background-color','blue')
}

希望这有帮助。

标记子元素以引用它们的更好方法

2 个答案: