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

Question

Ниже HTML

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

Мой JavaScript

$("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 с, которые не имеют класса 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

Проблема с использованием неселектора в этом случае заключается в том, что если у вас есть 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>

Сценарий

$(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')
  });
})

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

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

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