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

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 类的“可点击”运行这个函数：

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')
}

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

我喜欢使用这个“不要重复自己的原则”，但是有没有更干净的方法来做到这一点？我不认为classDOM 的属性应该用于此目的。我可能会不小心不小心创建了两个具有相同类的子 div。而且$(clicked).children.('attr1')...很丑。

一定有更好的办法。

Answer 1

如果您对使用该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')
}

希望这可以帮助。

Answer 2

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