在JavaScript中分配链接和类

我有一个英文和西班牙文的网站，在该网站的每个页面中都有一个指向该特定页面的西班牙文版本的链接，因此，如果用户位于“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>

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

---

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

HTML最适合管理内容。CSS最适合显示该内容，JavaScript最适合确定该内容的行为方式。而不是试图从JavaScript注入链接和控制HTML；相反，将内容保留在它所属的HTML中，并使用JavaScript定义一个或两个事件处理程序，以便根据超链接本身上的类值执行操作

你已经有了一个关于英语超链接的类，还有一个关于西班牙语超链接的单独类，所以你可以利用这个优势

编写单击处理程序： 由于切换“语言开关”最有可能导致设置布尔值，因此可以使用两个单击处理程序以所有英语链接和所有西班牙语链接为目标，然后根据单击链接时该开关的值控制行为

// 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，并且可以阅读和理解HTML，而无需您的帮助或查看JavaScript代码。他们不仅会看到他们习惯看到的熟悉模式，而且你可能会与他们有更好的工作关系

• 搜索引擎搜索你的网站将能够阅读链接并跟踪它们

• 没有JavaScript的浏览器将能够处理链接。有些人似乎很关心这件事。我不。但无论如何，这值得一提

---

总之，您认为HTML更易于管理是对的。通过使用这种技术，您可以消除代码中您应该关心的重复，并将内容移回HTML，因为您的直觉告诉您这是正确的做法。不仅您的代码更具可读性，还可以获得更好的搜索引擎优化结果。

HTML最适合管理内容。CSS最适合显示该内容，JavaScript最适合确定该内容的行为方式。而不是试图从JavaScript注入链接和控制HTML；相反，将内容保留在它所属的HTML中，并使用JavaScript定义一个或两个事件处理程序，以便根据超链接本身上的类值执行操作

你已经有了一个关于英语超链接的类，还有一个关于西班牙语超链接的单独类，所以你可以利用这个优势

编写单击处理程序： 由于切换“语言开关”最有可能导致设置布尔值，因此可以使用两个单击处理程序以所有英语链接和所有西班牙语链接为目标，然后根据单击链接时该开关的值控制行为

// 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，并且可以阅读和理解HTML，而无需您的帮助或查看JavaScript代码。他们不仅会看到他们习惯看到的熟悉模式，而且你可能会与他们有更好的工作关系

• 搜索引擎搜索你的网站将能够阅读链接并跟踪它们

• 浏览器机智