在 JavaScript 中分配链接和类

Question

我有一个英文和西班牙文的网站，在网站的每个页面中都有一个链接指向该特定页面的西班牙文版本，所以如果用户在“home.php”页面上，它看起来像这样：

<div id="language">
    <ul class="language">
        <li class="english"><a href="#" class="active" title="English"></a></li>
        <li class="divider"></li>
        <li class="spanish"><a href="inicio.php" class="notactive" title="Español"></a></li>
    </ul>
</div>

我想做的是将HTML中<a>标签中的href和类留空，然后根据用户所在的页面为<a>分配一个类和一个href URL，这样例如，我可以将该语言 div 添加到外部文件，然后使用<include> 将其附加到每个页面。为此，我使用以下代码：

$('ul.menubar a').each(function(){
    if(location.href.match('home.php')){
        $('ul.language li.english a').addClass('active');
        $('ul.language li.english a').append(function() {
            $(this).attr('onclick', 'return false;');
        });
        $('ul.language li.spanish a').addClass('notactive');
        $('ul.language a[href!="home.php"]').append(function() {
            $(this).attr('href', 'inicio.php');
        });
    }
}

问题是网站的英文版在导航栏有4个链接（home.php、services.php、aboutus.php、contact.php），西班牙文版也一样（有相应的翻译网址名称）。我认为必须重复该代码 8 次（每个链接 1 个，每种语言 4 个链接）会过多，实际上会添加更多代码，而不是简单地在 HTML 中添加类和 href url。使用 JS 的目的是简化事情。

所以我基本上想知道是否有人能想出更好的方法来做到这一点，这不需要那么多代码。如果我需要更改某些内容，我试图避免不得不编辑每个不同的页面。另外，我想知道这是否是实现我想要使用 JavaScript 的最佳方式。

Answer 1

HTML 最适合管理内容。 CSS 最适合呈现该内容，而 JavaScript 最适合确定该内容的行为方式。而不是尝试从 JavaScript 注入链接和控制 HTML；取而代之的是，将内容留在它所属的位置，在 HTML 中，并使用 JavaScript 定义一两个事件处理程序，以根据超链接本身的类值采取行动。

您的英文超链接上已经有一个类，而西班牙语超链接上已经有一个单独的类，因此您可以利用它来发挥自己的优势。

编写点击处理程序：

由于切换“语言切换”很可能会导致设置布尔值，因此您可以使用两个点击处理程序来定位所有英语链接和所有西班牙语链接，然后控制行为 em> 基于点击链接时该开关的值。

// handler for all English links
$('li.english a').click(function(event) {
    event.preventDefault();
    if(/* Switch is english */) {
        window.location = $(this).attr("href");
    } 
});

// handler for all Spanish links
$('li.spanish a').click(function() {
    event.preventDefault();
    if(/* Switch is SPANISH */) {
        window.location = $(this).attr("href");
    } 
});

注意，当一个链接被点击时，我们首先检查开关。根据它的值，我们要么重定向到该超链接，要么简单地阻止默认行为 - 转到新页面 - 完成。

处理演示文稿：

现在，您的另一个问题是，假设您的西班牙语网站和英语网站是同一个网站，您现在将看到总共 8 个超链接。同样，这是您的开关可以派上用场的地方。

// single handedly hide or display the relevant content, based on the switch
function switchToEnglish() {
    $('.english').show();
    $('.spanish').hide();
}

function switchToSpanish() {
    $('.spanish').show();
    $('.english').hide();
}

现在，我不知道你的 switch 函数中还包含什么，但这里的总体思路是我们不需要修改内容。我们只需要显示和隐藏内容。如果您还没有类似的东西，您需要将此概念集成到您现有的开关功能中。

这种方法有几个优点：

• 您的 Web 设计人员仍会在 HTML 中看到 href，并且无需您的帮助或查看 JavaScript 代码即可阅读和理解 HTML。他们不仅会看到他们习惯看到的熟悉模式，而且您可能会与他们建立更好的工作关系。

• 搜索您网站的搜索引擎将能够读取链接并跟踪它们。

• 没有 JavaScript 的浏览器将能够处理这些链接。有些人似乎在乎这个。我不。但无论如何都值得一提。

总之，你说得对，它更容易在 HTML 中管理。通过使用这种技术，您可以消除代码中您理所当然地担心的重复，并将内容移回 HTML，因为您的直觉告诉您这样做是正确的。不仅您的代码更具可读性，而且您还将获得更好的 SEO 结果。