javascript - 一个页面加载两个js函数

Question

我做了一个简单的网站，其中有 2 个功能可以在一页的菜单中加载我的页面问题是当我加载一个时它工作正常但是当我单击另一个相同的页面时加载是不可能使用这个什么样的功能？这是代码

$('#firstcontent1').click(function(){
            $('#content1').load('pages/firstcontent1.php');
        });
$('#firstcontent2').click(function(){
            $('#content1').load('pages/firstcontent2.php');
        });
$('#firstcontent3').click(function(){
            $('#content1').load('pages/firstcontent3.php');
        });

这是 HTML

<div id="content1">

    </div>
    <div >
            <ul id="menu-list">
                <li id="firstcontent1"><a href="#">firstcontent1</a>
                </li>
                <li id="firstcontent2"><a href="#">firstcontent2</a>
                </li>
                <li id="firstcontent3"><a href="#">firstcontent3</a>
                </li>
            </ul>
        </div>

另一个是

$('#secondcontent1').click(function(){
            $('#content2').load('page/secondcontent1.php');
        });
$('#secondcontent2').click(function(){
            $('#content2').load('page/secondcontent2.php');
        });
$('#secondcontent3').click(function(){
            $('#content2').load('page/secondcontent3.php');
        });

这是HTML

<div >
            <ul id="menu-list">
                <li id="secondcontent1"><a href="#">secondcontent1</a>
                </li>
                <li id="secondcontent2"><a href="#">secondcontent2</a>
                </li>
                <li id="secondcontent3"><a href="#">secondcontent3</a>
                </li>
            </ul>
        </div>
        <div id="content2" >

        </div>

如您所见，id 不同，页面名称和容器也不同，但例如我加载/单击 pages1 的 id，content1 将加载 page1，content2 也将加载 page1..我想当我点击 id pages1 content1 将加载 pages1 但 content2 不会加载 page1 因为我没有点击 page1 的 id。

更新:

我注意到只有 content1 被加载到 content2 中，例如当我点击 id pages1 content1 和 content2 将加载 pages1 但是当我点击 pages2 时只有 content2 将加载并且 content1 保持不变意味着正确的页面

Answer 1

所以您的问题可能是由于打字错误造成的。您正在尝试加载路径 page/content和 pages/content .不确定这是否只是一个粘贴错误，但我想我会指出这一点。此外，它可能无法正常工作，因为您使用的是相同的 id两次 -- menu-list .相反，使用类。

无论如何，您可以将所有这些合并为 1 个，而不是拥有 6 个不同的功能，然后现在您可以缩小问题范围(如果还有一个)。

也没有必要 <a>如果您没有将其链接到任何内容，请添加标签。相反，您使用 jQuery 事件处理程序来捕获该点击。

这可能是 HTML 格式:

<div id="content1"></div>
<div>
    <ul class="menu-list" data="content1">
        <li id="firstcontent1">firstcontent1</li>
            .
            .
            .
    </ul>
</div>

<div id="content2"></div>
<div>
    <ul class="menu-list" data="content2">
        <li id="secondcontent1">secondcontent1</li>
            .
            .
            .
    </ul>
</div>

接下来，您的合并 jQuery 应如下所示:

$(document).ready(function(){
    $('.menu-list li').click(function(){
        var content = "#" + $(this).parent().data();
        var page = "pages/" + $(this).attr('id') + ".php";

        $(content).load(page);
    });
});

如果您使用的是 jQuery POST 版本 1.7，您的函数应该像这样:

$(document).on('click', '.menu-list li', function(){
    var content = "#" + $(this).parent().data();
    var page = "pages/" + $(this).attr('id') + ".php";

    $(content).load(page);
});

现在您已经拥有了一个通用的菜单列表功能，您需要做的就是遵循 HTML 语法。作为一般的编程规则，如果您经常重复自己，那么您很可能做错了什么，或者可以做得更好。

编辑::

您的问题可能是由于在最后一个页面完全加载完成之前尝试加载页面。

当你尝试这样的事情时会发生什么:

$(document).ready(function(){
    $('.menu-list li').click(function(){
        var content = "#" + $(this).parent().data();
        var page = "pages/" + $(this).attr('id') + ".php";

        $(content).load(function(){
            $(this).load(page);
        });
    });
});