无法识别Div内容更改功能


div content change function not recognized

Hello &谢谢你的时间!

我试图设置类别的按钮,当点击加载该类别的第一个项目在vis包含的div。然后'下一个'和'prev'按钮在加载的div数据切换到该类别中的其他项目。

到目前为止,我有:

php:

<nav>
    <button onclick="changeContent('content1')">content1</button>
</nav>
<section id="main">
    <div id="visContainer"><div>
    </div>
</section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><'/script>')</script>
<script src="js/javascript.js"></script>

js:

    $(function(){
        function changeContent(content){
            $('#visContainer').load('divList.html' content);
    };
});

以及一个列出不同div的divList.html文件(现在用文本填充)。我在js中的函数changeContent行上得到一个"意外标识符",它一直说changeContent未定义(当按钮单击时)。我认为这可能与我的声明或jQuery有关,但我不知道在哪里。我是新的,所以任何帮助将是非常感激!

$(function(){ ... });

该函数创建一个新的作用域,使changeContent在内联事件处理程序所在的窗口作用域中不可用。快速修复将是:

$(function(){
    window.changeContent = function(content){
        $('#visContainer').load('divList.html' content);
    }
});

一个更好的解决方案是删除内联事件处理程序。

<button id="myButton">content1</button>

和JS:

$(function(){
    $('myButton').on('click', function() {
        $('#visContainer').load('divList.html #content1');
    });
});