Как использовать не() селектор в JQuery

Question

Ниже HTML

<div class="radio_tab"><span>Ad View</span> 
    <ul> 
     <li>Ad View</li> 
     <li>Page View</li> 
    </ul> 
</div> 

Мой браузер

$("div").not('.radio_tab').click(function(){ 
     alert('hi'); 

}); 

, а также я попытался

$("div:not(.radio_tab)").click(function(){ 
     alert('hi'); 

}); 

Я показываю выпадающее меню при щелчке span и он будет скрываться при нажатии на span/ul. Но проблема в том, что я хочу скрыть раскрывающийся список, расположенный вне div.radio_tab.

Я ценю все ваши комментарии

Answer 1

Оба этих селекторы найдут всехdiv S, которые не имеют класса radio_tab и применить обработчик щелчка к ним. Вероятно, это невероятно неэффективно, а не то, что вы хотите сделать. Кажется, что вы пытаетесь сделать ($("*:not('div.radio_tab')")) будет еще хуже.

Один альтернативный подход может заключаться в применении обработчика кликов к телу документа и проверки цели события, чтобы определить, является ли это div.radio_tab или одним из его дочерних элементов. Если нет, то скройте div и отвяжите обработчик события. Что-то вдоль этих линий (код написанных здесь, а не испытываемых!):

// attach the event handler to the body, where it will hear about 
// any clicks that don't have default behavior (like links); 
// use a namespaced event, so that it can be easily removed 
$(document.body).bind("click.radio_tab",function(evt){ 
    // make sure the click is outside the div in question 
    if($(evt.target).closest("div.radio_tab").length === 0) { 
    // hide the div, or whatever else needs to be done 
    $("div.radio_tab").hide(); 
    // unbind the event, since it's no longer needed 
    $(this).unbind("click.radio_tab"); 
    } 
}); 

Answer 2

, так как вы проверяете использование класса hasClass вместо того, чтобы получить булево ответ:

($("div").hasClass("radio_tab")) 

Answer 3

Вот как я справиться с подобной ситуацией:

jQuery('div').click(function() { 
    if (! (jQuery(this).hasClass('radio_tab'))) { 
     /* do something */ 
    }; 

Вот точно, как я справиться с этим на моем сайте www.ipreferjim.com:

jQuery('div.nav_link').click(function() { 
    if (! (jQuery(this).hasClass('no_select'))) { 
     jQuery('div.nav_link').not(this).find('div.top_level').removeClass('nav_selected'); 
     jQuery(this).find('div.top_level').addClass('nav_selected'); 
    }; 
}); 
/* end div.nav_link .click */ 

jQuery('div.nav_link').hover(function() { 
    jQuery(this).find('div.top_level').fadeOut(100); 
    jQuery(this).find('div.top_level').fadeIn(300); 
    /* Show Sub-menu */ 
    jQuery(this).find('.sub_level').show(); 
}, 
function() { 
    jQuery(this).find('.sub_level').hide(); 
}); 
/* end 'div.nav_link' .hover */ 

jQuery('div.sub_level a.dialog_link').click(function() { 
    if (jQuery(this).hasClass('get_json')) { 
     var json_link = 'retrieve.php?type=example&short_name=' + jQuery(this).attr('id') + '&format=json'; 
     jQuery.getJSON(json_link, function (json) { 
      jQuery('.ui-dialog-title').text(json.title); 
      jQuery('.ui-dialog-content').html(json.html); 
     }); 

     jQuery('#dialog').dialog('open'); 

     return false; 
    }; 
    /* end if */ 
}); 
/* end div.sub_level a.dialog_link .click */ 

Затем мои ссылки настраиваются с использованием элементов div с вложенными неупорядоченными списками.

<div class="nav_link"> 
<div class="top_level">Code</div><!-- end top_level --> 
    <div class="sub_level ui-corner-bottom"> 
    <ul id="links"> 
     <li><a href="?contentlink=assignments.php" id="assignments.php" class="navigation underline" onclick="javascript:showContent(this,'assignments.php')">Assignments</a> 
     </li> 
     <li>Snippets</li> 
    </ul> 
    </div><!-- end sub_level --> 
    </div><!-- end nav_link --> 

Кажется, это очень похожая проблема.

Answer 4

Проблема с использованием не селектор в этом случае, если у вас есть ваши radio_tab завернутые с другим div он перестанет работать полностью, потому что упаковка DIV не имеет radio_tab класс ... так как убедитесь, что там нет упаковка DIV и использовать ответ Джима или попробовать что-то похожее на это (но этот ответ может быть выход в левом поле)

HTML

<div class="wrapper"> 
<div class="not_radio_tab"><input type="text" readonly value="Not Ad View" /> 
    <ul> 
    <li>Not Ad View</li> 
    <li>Not Page View</li> 
    </ul> 
</div> 
<div class="radio_tab"><input type="text" readonly value="Ad View" /> 
    <ul> 
    <li>Ad View</li> 
    <li>Page View</li> 
    </ul> 
</div> 
</div> 

Script

$(document).ready(function(){ 
$('.radio_tab input') 
    .focus(function() { 
    $(this).parent().find('ul').css('background-color','#fc0') 
    }) 
    .blur(function() { 
    $(this).parent().find('ul').css('background-color','#222') 
    }); 
})