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 / 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

因为您正在检查课程，所以使用 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

在这种情况下使用not选择器的问题是，如果你的radio_tab被另一个div包裹，它将完全停止工作，因为包装div没有radio_tab class ...所以要么确保没有包装div并使用Jim的答案或尝试类似于此的东西（但这个答案可能会在左侧字段中显示出来）

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

如何在jquery中使用not（）选择器

4 个答案: