Question

我有一个页面，上面有几个标签。我将在这个例子中使用两个。（产品，服务）

我没有在运行时加载这些选项卡中的内容，而是在单击选项卡时加载它们的特定选项卡内容。我有很多带有大量内容的标签，这是获得合理的初始页面/加载速度的唯一方法。

这些标签中的每一个都有自己的javascript文件，在加载内容后加载。 javascript文件非常庞大，我需要在我的数据中提供一个通用脚本文件，其中包含通用令牌，以便我可以为所有选项卡使用相同的脚本文件...例如，而不是类.viewproductcomments，.viewservicecomments我等所有人都有.viewelement评论。

我已经成功完成了，但它又造成了另一个问题。

当单击另一个选项卡时，是否有一种简单的方法来“卸载此脚本文件创建的所有操作”，以便在通过ajax将所有新元素发送到页面后重新加载它？我可以通过和.on每个小东西，但.on的层次结构级别捕获一个静态元素将是相当多的阶梯。

基本上我有很多脚本需要在内容加载后“识别”，我不想为每个标签重新加载相同的脚本文件，因为这会导致重复事件或其他未知的东西。 / p>

非常感谢任何建议，建议。

谢谢！

* 编辑以提供示例：

$('.post_comments_level1').each(function() {
    var cType = parseInt($(this).parent().prev('div').find('.c-t').text());
    var uniqueID = parseInt($(this).parent().prev('div').find('.un-id').text());
    var listingID = parseInt($(this).parent().prev('div').find('.l-id').text());
    var commentsHome = $(this);

    $.ajax({
        url: '/MyFeeds/Feed.aspx',
        type: 'POST',
        dataType: 'html',
        data: {
            "xfd" : 'Get_Comments',
            "ctype" : cType,
            "unid" : uniqueID,
            "pid" : portalID,
            "lid" : listingID,
            "uid" : userID
        },
        success: function(data) {
            commentsHome.html(data);
            ResetHeight();
        }
    });
});

例如，每个“产品”都有自己的一组注释，这些注释包含在UL中，注释元素是LI元素。示例脚本使用类.post_comments_level1查找所有ul，通过ajax从数据库中检索注释，并在最初为空的ul元素中插入这些注释。

所以当我点击下一个标签时，说出它的服务......我可以完成所有这些工作，但是我正在寻找一个可靠的方法。例如，我现在只想在服务选项卡中仅在新添加的UL上执行该操作...只是试图了解优化情况的最佳方法。

Answer 1

听起来，我需要使用适当的方法创建JavaScript类，以最大限度地减少您为完成同样的事情而编写的代码量。

示例：

您的用户点击“产品”标签：

$('#productsTab').on('click', function(evt){

    //Use classes you've created.
    var blah = new Foo(); 
    });

然后，您的用户点击“服务”标签：

$('#servicesTab').on('click', function(evt){

    //Same function, same methods, is not affected by old one
    var blah2 = new Foo(); 
    });

这是在JavaScript中创建类的一个非常原始的示例，但它应该让您走在正确的轨道上：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

编辑：

我解释你的问题的方式是你问如何最好地重用你的代码。您描述了有几个选项卡，其中包含JavaScript / jQuery以类似方式执行的内容。

我建议你创建一个类（在JavaScript中只是一个可重用的函数）来完成这个任务。

如果您无法理解这一点，也许这个例子有帮助。查看代码并阅读警报：

http://jsfiddle.net/anb4k/

我创建了一个名为“foo”的函数。

然后我将“blah”变量分配给“new foo（）;”。

“blah”继承了所有“foo”的功能，但是通过使用“new”运算符，我创建了一个完全不同的函数实例。这可能会帮助您解决标签问题。构建代码以使模型无关紧要，然后在条件正确时使用该函数构建内容（onClick或可见时等）。

卸载/重新加载javascript或更好的解决方案，以获取大量的ajax内容？

1 个答案: