handler - 单击特定类（处理程序）的子元素的切换 - jquery

Question

当我点击父母时，我需要影响一个特定的孩子（切换它的风格）。

我使用处理程序实现了切换功能：

$(".p1").on({
    mouseenter: mouseEnter,
    mouseleave: mouseLeave
});
function mouseEnter() {
    $(this).css('border', 'solid 5px #999999');
}
function mouseLeave() {
    $(this).css('border', 'solid transparent 5px');
}
function handler1() {
    $(this).css('border', 'solid 5px #222222');
    $(this).off('mouseenter mouseleave');
    $(this).one("click", handler2);
}
function handler2() {
    $(this).css('border', 'solid transparent 5px');
    $(this).on({mouseenter: mouseEnter, mouseleave: mouseLeave});
    $(this).one("click", handler1);
}
$(".p1a").parent(".p1").one("click", handler1);
$(".pl").children(".p1").one("click", handler1); //this one doesn't work

http://jsfiddle.net/2czxN/4/

除了通过点击它的父母（也就是最后一行）来影响孩子之外，一切都有效。

如何将此功能添加到此功能？

Answer 1

小提琴中唯一的区别是，.pl 只包装了第一个 .p1，所以第二个不起作用......

$(".pl").children(".p1").one("click", handler1); //this one doesn't work

<div class="pl" style="width: 300px; height: 150px; background: #888888; border: solid white 5px;">
    <div class="p1" style="width: 200px; height: 100px; background: #555555; border: solid transparent 5px;">
        <div class="p1a" style="width: 200px; height: 10px; background: #333333;"></div>
    </div>

    <div class="p1" style="width: 200px; height: 100px; background: #555555; border: solid transparent 5px;">
        <div class="p1a" style="width: 200px; height: 10px; background: #333333;"></div>
    </div>
</div>

是的，我只是想解释为什么第二个声明不适用于第二个 p1 .. 我不确定你想要达到什么，像这样？： http: //jsfiddle.net/reyaner/3yZmW/

Answer 2

这是最终功能 - http://jsfiddle.net/2czxN/6/

无论您单击子项 (p1a) 还是父项 (pl)，都可以 100% 准确地工作。

$(".p1a").one("click", handler1);
$(".pl").one("click", handler1);

关键在于将所有选择器 ( find, parent) 放入带有 . 的处理程序中$(this)。