1

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

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

这些选项卡中的每一个过去都有自己的 javascript 文件，该文件在内容加载后加载。javascript 文件很大，我需要在我的数据中提供一个带有通用标记的通用脚本文件，以便我可以对所有选项卡使用相同的脚本文件...示例，而不是类 .viewproductcomments、.viewservicecomments等。我对所有这些都有 .viewelementcomments。

这我已经成功地完成了，但它产生了另一个问题。

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

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

任何意见，建议将不胜感激。

谢谢！

*编辑提供示例：

$('.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 上执行该操作……只是想了解优化情况的最佳方法。

4

1 回答 1

0

在我看来，您需要使用适当的方法创建 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 或可见等）使用该函数构建您的内容。

于 2013-08-19T17:46:56.280 回答