Question

我的html中有三个锚标签链接，带有id的“切换器”，“切换器-b”，“切换器-c”，当点击锚标签“切换器”时，我想从我的html页面加载内容服务器“content.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>

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

Answer 2

你的元素是一个内部p元素

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

您也可以执行类似

的操作

$('a[id^=switcher ]').click(function(event){});

jQuery load（）和switch语句不起作用

2 个答案: