Question

我对jQuery很新，并且教我自己。下面你将看到我正在处理的代码和一个包含的JSFiddle。

我要做的是在我专注于输入/选择时添加一个类，并在单击父div时添加类。我基本上可以使用它，但是有2个独立的功能。

的问题：

当我点击输入时，它会添加类，但是当我点击父div时，它会运行另一个函数，反之亦然。

可能的解决方案：

将所有内容合并为一个功能。
如果类存在，请说不要运行其他函数。

请解释一下代码，以便我可以从中学习。如果您没有解决方案，任何提示或方向也会有所帮助。提前谢谢！

http://jsfiddle.net/q90tue8L/

HTML

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

CSS

.panel{
    padding:15px;
    background:grey;
    margin-bottom:15px;
}

.panel-primary{
    margin:0 15px 0 15px;
    background:blue;
    margin-bottom:15px;
}

的jQuery

$(document).ready(function () {

    $('.panel').click(function () {
        $('.panel').removeClass('panel-primary');
        $(this).addClass('panel-primary');
    });

    $('input, select').bind('focus blur', function () {
        $(this).closest(".panel").toggleClass('panel-primary');
    });

});

Answer 1

您可以尝试这样的事情：

$('input, select').bind('focus blur', function (event) {
    event.stopPropagation();
    $('.panel').removeClass('panel-primary');
    $(this).closest(".panel").addClass('panel-primary');
});

为你的第二个功能。

使用.stopPropagation()，您可以阻止点击事件进入＆＃34;冒泡＆＃34; DOM。所以它现在永远不会到达父div来触发你的第一个函数。

<强> DEMO

如何添加一个具有焦点和单击但没有运行两次的类的类？

1 个答案: