2

私はこの問題を調査しており、クリックしているdivにクラスを追加/削除するための解決策を見つけることができますが、完全に別のdivではありません。

クラス .search-bar.... の入力をクリックすると、クラスが .search-wrap... という div に追加されます。ページ/オフ要素の他の場所をクリックすると、.search-wrap に追加されたクラスが削除されます。

私はこれを試しました：

$("div.search-bar").click(function(){
    $("div.search-wrap").addClass("white");
});

アイデアはありますか？

4

8 に答える 8

4 
$('html').click(function() {
     $("div.search-wrap").removeClass("white");
});

$("div.search-bar").click(function(event){
     event.stopPropagation();
     $("div.search-wrap").addClass("white");
});

をクリックするとdiv.search-bar、addClassが呼び出されますが、イベントは までバブルアップしませんbody。ページ上で他のクリックを行うと、htmlのクリック ハンドラが呼び出され、クラスが削除されます。

于 2013-04-26T12:17:43.133 に答える
2

jsBin デモ

$(".search-bar").on('focus blur', function( e ){
    $(".search-wrap").toggleClass("white");
});

jsBin デモ - DIV の使用

$(".search-bar").on('click', function( e ){
    e.stopPropagation();
    $(".search-wrap").addClass("white");
});
$(document).on('click', function( e ){
    if(e.target.className!="search-bar")
    $(".search-wrap").removeClass("white");
});
于 2013-04-26T12:23:13.170 に答える
2

フォーカス状態でのみスタイルを変更し、編集終了後にデフォルト状態に戻す必要があります

クリック イベントを使用する必要はありません。適切な方法ではありません。

フォーカスと ぼかしを使用する必要があると思います

ドキュメントやボディにイベントを追加することができますが、このイベントはリンクやボタンなどをクリックするたびに発生します。

于 2013-04-26T12:19:19.190 に答える
0

一方通行

$(".search-bar").on("click", function(e) { $(".search-wrap").addClass("white"); });
$(".search-wrap").siblings().on("click", function() { $(".search-wrap").removeClass("white"); });
$(".search-wrap").siblings().parents().on("click", function() { $(".search-wrap").removeClass("white"); });

別の方法

$(".search-bar").on("click", function(e) { $(".search-wrap").addClass("white"); });
$("body, body *").not(".search-wrap, .search-wrap *").on("click", function() { $(".search-wrap").removeClass("white"); });

独自の長所と短所の両方があります。つまり、遅いシステムでの応答速度と可能な HTML レイアウトです。

divで入力を使用できる場合、最良の方法は次のとおりです。

$(".search-bar input").on("focus", function(e) { $(".search-wrap").addClass("white"); })
.on("blur", function(e) { $(".search-wrap").removeClass("white"); });
于 2013-04-26T12:20:24.940 に答える
0

そして focusin() focusout() を使用して

あなたの入力がクラスを追加したとき、彼がそれを失ったとき、クラスを削除します...あなたはどう思いますか?

$("div.search-bar").focusin(function(){
    $("div.search-wrap").addClass("white");
});

残り ：

$("div.search-bar").focusout(function() {
     $("div.search-wrap").removeClass("white");
});
于 2013-04-26T12:18:58.293 に答える
0 
$(".search-bar").click(function () {
    event.stopPropagation();
    $("div.search-wrap").addClass("white");
});

$(document).on("click", function () {

    $("div.search-wrap").removeClass("white");
});

JSフィドルリンク

于 2013-04-26T12:21:33.067 に答える
0 
$('div.search-bar').click(function() {
    $('div.search-wrap').addClass('white');
});
$('*:not(.search-bar)').click(function() {
    $('div.search-wrap).removeClass('white');
});
于 2013-04-26T12:22:16.463 に答える