0

我的 html 中有三个锚标记链接，ID 为“switcher”、“switcher-b”、“switcher-c”，当单击锚标记“switcher”时，我想从我的服务器上的 html 页面加载内容“内容.html”，锚点“switcher-b”将加载“content-b.html”，“switcher-c”将加载“content-c.html”。我还有一个锚标记 ID“默认”，单击时将重置/卸载 html 页面。

我认为 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。当然它总是默认的

于 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 回答