如何添加具有焦點的類並單擊但不具有運行兩次的功能？

我是相當新的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'); 
    }); 

});

來源

2014-12-04 user262430

哪個函數運行兩次？你的問題對我來說並不清楚。 – 2014-12-04 15:06:33

因此，轉到JSFiddle並單擊第一個輸入，然後單擊父div，反之亦然。 – user262430 2014-12-04 15:09:36

你可以嘗試這樣的事情：

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

你的第二個功能。

隨着您防止點擊事件「泡」了DOM。所以它現在永遠不會觸發你的第一個函數到達父div。

DEMO

來源

2014-12-04 15:09:40 empiric

哇快和容易愛它。謝謝！ – user262430 2014-12-04 15:11:46

你是否知道是否有另一種方式來完成這個功能，比如將2個功能合併爲一個？ – user262430 2014-12-04 15:12:59

@ user262430否。兩個函數都有兩個不同的用途。順便說一下，你的HTML中沒有任何'select'元素。你應該從你的jQuery代碼中移除它。 – 2014-12-04 15:17:35

如何添加具有焦點的類並單擊但不具有運行兩次的功能？

回答

相關問題