jQuery .load(jQuery(this).attr("id")) vs .load("theID") - 如何翻译？答案

【问题标题】：jQuery .load(jQuery(this).attr("id")) vs .load("theID") - how to translate?jQuery .load(jQuery(this).attr("id")) vs .load("theID") - 如何翻译？
【发布时间】：2011-07-13 04:52:53
【问题描述】：

我有一个列表（菜单）。当用户点击链接时，我想用 ajax 加载内容。要加载的文章将根据链接 id 属性确定。

示例：

<ul class="ajaxMenu">
    <li><a id="services">Services</a>
    ...
</u>

我存储文章链接的变量，与链接的 id 命名相同（即服务和 ajax 调用的 url 存储在 var services 上）

这行得通：

var services = "index.php?option=com_content&view=article&id=2&tmpl=component";

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 

            jQuery("#contentComponent").load(services);

        }

    );

由于这行代码 jQuery(this).attr("id") 给了我 id，我希望这会起作用 [它不起作用]：

var services = "index.php?option=com_content&view=article&id=2&tmpl=component";
var designs = "index.php?option=com_content&view=article&id=3&tmpl=component";
var contact = "index.php?option=com_content&view=article&id=2&tmpl=component";

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 

            jQuery("#contentComponent").load(jQuery(this).attr("id"));

        }

    );

我可以创建一个 if 或循环，遍历每个 var，（即 if jQuery(this).attr("id") == "services"...load(services))

但我怀疑我可以通过简单优雅的代码来实现这一点。

我怎样才能将 jQuery(this).attr("id") 转换为 .load() 函数，而不必对 jQuery(this).attr("id") 的值进行 if、循环等操作我存储要加载的 url 的命名变量？

【问题讨论】：

它不会那样工作，因为 attr 返回一个字符串“services”而不是变量 services。
请不要这样做。您正在使您的网站无法导航、无法搜索、无法添加书签；重塑框架集的所有最糟糕的功能。要正确执行此操作，您需要将 <a> 链接指向真实文档以实现可访问性，然后使用 hash-navigation、History API 和 hashbang 链接作为备份通过页面内容替换来增强它。在您了解正确执行此操作（或为您执行此操作的预制脚本或插件）之前，您的基于内容的文档应单独保留load()，并坚持使用简单、可靠、可访问的链接。
@bobince 你认为答案能解决你提出的问题吗？
@Ibero：使用正确的链接可以解决一些但不是所有的可访问性/可用性问题。您现在可以右键单击-在新窗口中打开/书签/中键单击等，这是一个好的开始。您仍然会遇到无法在页面之间导航的后退/前进按钮，并且地址栏中没有任何内容可以为其他人添加书签或链接。

标签： jquery

【解决方案1】：

我会首先将 href 属性放入您的链接中，因为这似乎是放置它们的好地方。

<ul class="ajaxMenu">
    <li><a href="...">Services</a>
    ...
</ul>

然后在单击处理程序中，使用 href 属性执行加载调用。并且不要忘记致电preventDefault 以阻止点击实际重新加载整个页面。

jQuery(".ajaxMenu > li > a ").click(function(e) { 
    var href = jQuery(this).attr('href');
    jQuery("#contentComponent").load(href);
    e.preventDefault();
});

【讨论】：

好主意，因为（有更多工作）如果用户禁用了 JS，它会更好地降级。需要考虑整个页面刷新和仅将片段放入特定 div 之间的区别。

【解决方案2】：

创建从 ID 到 URL 的映射：

var pages = {
    services: "index.php?option=com_content&view=article&id=2&tmpl=component",
    designs: "index.php?option=com_content&view=article&id=3&tmpl=component",
    contact: "index.php?option=com_content&view=article&id=2&tmpl=component"
};

然后在您的 click 处理程序中访问它：

jQuery(".ajaxMenu > li > a ").click( 
    function(event) { 
        jQuery("#contentComponent").load(pages[this.id]);
    }
);

注意：还要注意this.id 的使用，这是一种更简单（也更快）的直接 DOM 方法，可以读取被点击元素的 ID，而不是调用 jQuery(this).attr("id")。

【讨论】：

【解决方案3】：

在第一次尝试（有效）中，您正在加载一个 URL，在第二次尝试中，您只是在加载一个 ID。您的服务器需要一个看起来像的 URL。

试试这个：

jQuery(".ajaxMenu > li > a ").click( 
        function(event) { 
                        var services = "index.php?option=com_content&view=article&id=2&tmpl=component";
        var designs = "index.php?option=com_content&view=article&id=3&tmpl=component";
        var contact = "index.php?option=com_content&view=article&id=2&tmpl=component";

            var id = jQuery(this).attr("id");
            if (id == 'services')
            {
                jQuery("#contentComponent").load(services);
            }
            else if (id == 'designs')
            {
                jQuery("#contentComponent").load(designs);
            }
            else if (id == 'contact')
            {
                jQuery("#contentComponent").load(contact);
            }
        }

    );

【讨论】：

您的语法已关闭，您需要在 click 之外或函数内声明这些变量。他们不可能在那里。
1. switch 优于 if else if else if else ...。 2. 这需要一个映射表，而不是硬编码逻辑。
是的，我知道，但这是另一种方式

【解决方案4】：

这行不通，因为这基本上是在尝试调用 jQuery("#contentComponent").load("Services")，这不是您想要的。

如果这些变量是全局变量，您可以这样做：

var url = window[jQuery(this).attr("id")];
jQuery("#contentComponent").load(url);

但是，使用一堆全局变量通常是不受欢迎的。您可能需要考虑使用jQuery Data 并将 URL 直接存储在链接上。或者使用类似于刚刚弹出的一堆其他答案的对象。

【讨论】：