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>

是的，我只是想解释为什么第二个声明不适用于seconed 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)。

单击切换某个类的子元素（处理程序） - jquery

2 个答案: