0

HTML に 3 つのアンカー タグ リンクがあり、ID は「switcher」、「switcher-b」、「switcher-c」です。アンカー タグ「switcher」をクリックすると、サーバーの html ページからコンテンツをロードしたいと思います。 .html」、アンカー「switcher-b」は「content-b.html」を読み込み、「switcher-c」は「content-c.html」を読み込みます。クリックするとHTMLページがリセット/アンロードされるアンカータグID「デフォルト」もあります。

switch ステートメントが自分のタスクを達成するための最良の方法であると考えましたが、機能していません... jQuery/JavaScript に精通していませんが、中級または上級の知識を持つ JavaScript / jQuery 開発者が特定できるかどうかを学びたいと考えていますjQuery構文で私が間違っていることと、説明付きの解決策を提案してください。本当に感謝します。

私の投稿をご覧いただき、ありがとうございます。

 <!-- HTML code -->

     <html>

        </head>
        <body>
        <h1>AJAX Calls with jQuery load()</h1>
        <div id="switcher">
        <p><a id="switcher" href="#">Click here to fetch HTML content</a></p>
        <p><a id="switcher-b" href="#">Click here to fetch HTML content</a></p>
        <p><a id="switcher-c" href="#">Click here to fetch HTML content</a></p>
        <p><a id="default" href="#">Reset</a></p>
        </div>

            <div id="result"></div>
</body></html>      




<!-- jQuery Code -->

            $(function(){

                $('#switcher a').click(function(event){
                    var bodyClass = this.id.split('-')[1];

                    $('body').removeClass().addClass('bodyClass');

                    switch(bodyClass){
                        case 'switcher':
                            $('#result').load('content.html #content');
                            break;
                        case 'switcher-b':
                            $('#result').load('content-b.html #content');
                            break;
                        case 'switcher-c':
                            $('#result').load('content-c.html #content');
                            break;
                        default:
                            $('#result').unload();
                    }
                    return false;
                });

            });

            </script>
4

2 に答える 2

1 
 $('#switcher a').click(function(event){
                    var bodyClass = this.id;

                    $('body').removeClass().addClass('bodyClass');

                    switch(bodyClass){
                        case 'switcher':
                            $('#result').load('content.html #content');
                            break;
                        case 'switcher-b':
                            $('#result').load('content-b.html #content');
                            break;
                        case 'switcher-c':
                            $('#result').load('content-c.html #content');
                            break;
                        default:
                            $('#result').unload();
                    }
                    return false;
                });

削除.split('-')[1]するだけです。完全な ID をテストするのではなく、「-」の後に ID の 2 番目の部分だけを使用しています。もちろん、常にデフォルトになります

于 2012-08-31T23:04:35.457 に答える
0

あなたの要素はその内部のp要素です

$('#switcher p a').click(function(event){});

次のようなこともできます

$('a[id^=switcher ]').click(function(event){});
于 2012-08-31T23:04:34.207 に答える