0

编辑：好的，为了弄清楚这一点，您使用 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>

谢谢你们

4

9 回答 9

3

我建议将您的 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;
}
于 2012-06-01T17:36:51.397 回答
1

试试看：

<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>
于 2012-06-01T17:33:52.770 回答
1

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

于 2012-06-01T17:34:37.917 回答
1

试试这个，现场演示

$('body').children().not('#ulSize').removeClass('large normal').addClass('small');
于 2012-06-01T17:35:34.403 回答
1

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

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

于 2012-06-01T17:35:55.153 回答
1

这应该有效：

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

于 2012-06-01T17:38:11.403 回答
1

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

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

于 2012-06-01T17:53:53.860 回答
1

这个怎么样。更简单的 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>
于 2012-06-01T18:23:24.713 回答
1

好的，你正在做一个教程，所以你想要详细的 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'));
});
于 2012-06-01T20:24:58.810 回答