Jquery 不是选择器难度答案

【问题标题】：Jquery Not selector difficultyJquery 不是选择器难度
【发布时间】：2012-06-02 04:43:55
【问题描述】：

编辑：好吧，为了弄清楚这一点，您使用 not 选择器来过滤特定标签中的属性而不是过滤子元素？

谁能帮我看看我是否有某种语法错误，或者我不理解这个概念？

我有列表项，当您单击时，它们会更改正文的字体大小。现在列表项在正文中，因此其字体更改为。我希望这个 UL 保持相同的字体。所以我使用 .not("#ulSize") 如下所示。但这不起作用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#liSmall").click(function () {
                $('body').not('#ulSize').removeClass('large normal').addClass('small');
            });
            $("#liNormal").click(function () {
                $('body').not('#ulSize').removeClass('large small').addClass('normal');
            });
            $("#liLarge").click(function () {
                $('body').not('#ulSize').removeClass('small normal').addClass('large');
            });
        });
    </script>
    <style type="text/css">
        .large
        {
            font-size: large;
        }

        .normal
        {
            font-size: medium;
        }

        .small
        {
            font-size: small;
        }
    </style>
</head>
<body>
    <ul id="ulSize">
        <li id="liSmall">Small Font</li>
        <li id="liNormal">Normal Font</li>
        <li id="liLarge">Large Font</li>
    </ul>
        Text in here!!!
</body>
</html>

谢谢大家

【问题讨论】：

.not('#ulSize') 只是删除之前匹配集中#ulSize 中的任何内容。而且由于body 不是#ulSize 反正......什么也没有发生。此外，.not() 不是选择器。选择器是:not()，带有冒号。
所以 $('body:not("#ulSize")')... 应该可以解决问题吗？因为我也试过了，没有阳性结果！
无论如何你都不能删除这样的元素。

标签： jquery html css jquery-selectors

【解决方案1】：

我建议将您的 JS 重构为这样的：

$(function(){
  $('#liSmall, #liNormal, #liLarge').on('click', function(e){
    $('body').removeClass('small medium large');
    switch(this.id){
      case 'liSmall': $('body').addClass('small'); break;
      case 'liMedium': $('body').addClass('medium'); break;
      case 'liLarge': $('body').addClass('large'); break;
    }
  });
});

然后在#ulSize 列表中硬编码一个字体大小，然后让浏览器完成剩下的工作。

#ulSize {
    font-size: 16px !important;
}

【讨论】：

好的，但这会改变被点击的 LI 上的字体大小，而不是所有东西，除了 ul/li 元素，所以它看起来只是倒退了。
@MarkSchultheiss 你说的很对，我误读了他的意图。我不知道为什么我的回答被接受了，这是错误的：P 我现在已经修好了。
您必须在 ul 中添加“正常”，否则它也会从正文中继承字体大小。
@MarkSchultheiss 我在评论中添加了关于 CSS 的内容，但是您也可以添加普通类。

【解决方案2】：

试试看：

<script type="text/javascript">
    $(document).ready(function () {
        var $DefaultULSize = $('#ulSize').css('font-size');

        $("#liSmall").click(function () {
            $('body').removeClass('small normal large').addClass('small');
            $('#ulSize').css('font-size', $DefaultULSize);
        });
        $("#liNormal").click(function () {
            $('body').removeClass('small normal large').addClass('normal');
            $('#ulSize').css('font-size', $DefaultULSize);
        });
        $("#liLarge").click(function () {
            $('body').removeClass('small normal large').addClass('large');
            $('#ulSize').css('font-size', $DefaultULSize);
        });
    });
</script>

【讨论】：

是的，这很完美，谢谢，但老实说，我正在查看一些 jquery 教程，我想专门使用 not 获得相同的结果:)

【解决方案3】：

selection.not(filter) 返回选择中匹配过滤器的元素集。

你在这里做的是过滤没有“ulSize”id的“body”标签，所以你的 .not() 过滤器没用。

【讨论】：

【解决方案4】：

这应该可行：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#liSmall").click(function () {
                $('body').removeClass('large normal').addClass('small');
            });
            $("#liNormal").click(function () {
                $('body').removeClass('large small').addClass('normal');
            });
            $("#liLarge").click(function () {
                $('body').removeClass('small normal').addClass('large');
            });
        });
    </script>
    <style type="text/css">
        .large
        {
            font-size: large;
        }

        .normal
        {
            font-size: medium;
        }

        .small
        {
            font-size: small;
        }
        #ulSize
        {
        font-size: 16px !important;
        }
    </style>
</head>
<body>
    <ul id="ulSize">
        <li id="liSmall">Small Font</li>
        <li id="liNormal">Normal Font</li>
        <li id="liLarge">Large Font</li>
    </ul>
        Text in here!!!
</body>
</html>

工作小提琴http://jsfiddle.net/cYa9q/

【讨论】：

不改变 LI 字体

【解决方案5】：

从您的 JavaScript 中删除 .not('#ulSize') 并将 #ulSize { font-size: medium !important; } 添加到您的 CSS 中。不要像其他人推荐的那样不必要地膨胀你的 JS，这是没有意义的。

【讨论】：

【解决方案6】：

试试这个，Live Demo

$('body').children().not('#ulSize').removeClass('large normal').addClass('small');

【讨论】：

【解决方案7】：

如果你想增加页面的字体大小，为什么要每个元素都这样做？

在 body-tag（或 HTML-tag）上添加/删除类并相应地设置 CSS 会更容易。

【讨论】：

【解决方案8】：

这个怎么样。更简单的 Jquery 编码和使用 NOT 选择器？

<script type="text/javascript">
    $(document).ready(function () {
        $('#ulSize > li').click(function(event){
        $('body').children(':not(#ulSize > li)').removeClass('small normal large').addClass($(this).attr('id').substr(2).toLowerCase());
    });
</script>

【讨论】：

【解决方案9】：

好的，你正在做一个教程，所以你想要详细的 jQuery，我明白了。

出于同样的原因，您还想使用.not() 语法。我明白了。

我修饰了这个例子，所以用边框显示没有改变的地方。

所以，这样做：

var noto = $('#ulSize, #ulSize > li'); // stuff to NOT select/change
noto.css('border', 'solid lime 1px');// stuff that should not change
noto.addClass('normal');// avoid inheriting from the body.

var selecter = $('body').not(noto); // stuff TO change but NOT the noto stuff above.
selecter.css('border', 'solid red 1px');// border around stuff that should change.
// verbose click events for the demo
$("#liSmall").click(function() {
    selecter.removeClass('large normal').addClass('small');
});
$("#liNormal").click(function() {
    selecter.removeClass('large small').addClass('normal');
});
$("#liLarge").click(function() {
    selecter.removeClass('small normal').addClass('large');
});

为了好玩，给每个 li 设置他们正在设置的类：

<body>
    <ul id="ulSize"> 
        <li id="liSmall" class='small'>Small Font</li> 
        <li id="liNormal" class='normal'>Normal Font</li> 
        <li id="liLarge" class='large' >Large Font</li> 
    </ul>
    <div id='myclass'>
    Text in here!!! 
    </div>
Text in the body
</body>

然后使用它：

var noto = $('#ulSize, #ulSize > li');
var selecter = $('body').not(noto);
$('#liSmall, #liNormal, #liLarge').click(function(e) {
    selecter.removeClass('small normal large').addClass($(this).attr('class'));
});

【讨论】：

感谢您提供如此详细的答复！我从中学到了很多！
愚蠢的我，css继承需要：noto.addClass('normal');所以我添加了那个。没有这个，body 中的元素会继承 body 的 css。如果您不包含 ul 元素中的文本，同样的问题也适用。