javascript - jQuery 2.x - .on 功能无法正常工作

Question

我正在开发一个网站，它有一个按钮，然后在单击时显示内容，再次单击时，它应该隐藏它。现在我的脚本执行了一次，所以当我点击时，它会显示内容，当我再次点击时，它会隐藏它，但是当我再次点击时，什么也没有发生。我用谷歌搜索它，我发现on() 功能，但它不起作用。请帮忙。

这是我的代码：

$(document).ready(function() {
    $('#togglecont').on('click', function() {
        $('#content').load('content/main.html');
        $('#togglecont').click(function() {
            $('#content').load('content/blank.html');
        });
    });
});

Answer 1

您可以使用变量来跟踪要加载的下一页：

$(function() {
    var pages = ['content/main.html', 'content/blank.html'],
        pageToggle = 0;
    $('#togglecont').on('click', function() {
        $('#content').load(pages[pageToggle]);
        pageToggle = (pageToggle + 1) % 2;
    });
});

每次#togglecont单击pageToggle都会在 0 和 1 之间“切换”，从而导致pages[pageToggle]循环产生两个页面之一。

这个jsfiddle显示了这种行为，尽管我不得不使用.text()而不是.load()因为我不知道如何包含外部 HTML 文件。

Answer 2

试试看：

$(document).ready(function () {
     $('#togglecont').on('click', function () {    
         if (!$(this).data('uri') || $(this).data('uri') === "blank") $(this).data('uri', 'main');
         else $(this).data('uri', 'blank');
         $('#content').load('content/' + $(this).data('uri') + '.html');
     });
 });