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

ページのフォントサイズを大きくしたいのなら、なぜ要素ごとにそれをしたいのですか？

bodyタグ（またはHTMLタグ）でクラスを追加/削除し、それに応じて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

OK、あなたはチュートリアルを行っているので、冗長な jQuery が必要です。それはわかりました。

.not()同じ理由で構文も実行する必要があります。わかりました。

変更されていないものを境界線で示すように、例を装飾しました。

SO、これはそれを行います：

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 に答える
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

JavaScriptを取り除き、CSS.not('#ulSize')に追加します。#ulSize { font-size: medium !important; }他の人が推奨するように JS を不必要に肥大化させないでください。無意味です。

于 2012-06-01T17:34:37.917 に答える
1

これを試してみてください、ライブデモ

$('body').children().not('#ulSize').removeClass('large normal').addClass('small');
于 2012-06-01T17:35:34.403 に答える
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

selection.not(filter) は、フィルターに一致するセレクション内の要素のセットを返します。

ここで行っているのは、「ulSize」ID を持たない「body」タグをフィルタリングしているため、.not() フィルターは役に立ちません。

于 2012-06-01T17:35:55.153 に答える