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中的href和类保留在空白的<a>标记中，并根据用户所在的页面为<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定义一个或两个事件处理程序，以根据超链接本身的类值进行操作。

您已经在英语超链接上有一个课程，并且您的西班牙语超链接上有一个单独的课程，因此您可以利用此课程。

编写点击处理程序：

由于切换你的“语言切换”最有可能导致一个布尔值设置，可以使用两种单击处理定位到您所有的英语链接和你的西班牙语链接，然后控制的行为基于点击链接时该开关的值。

// 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();
}

现在，我不知道你的交换机功能中还包含了什么，但这里的一般想法是我们不需要修改内容。我们只需要显示和隐藏内容。如果你还没有这样的东西，你需要将这个概念集成到你现有的开关功能中。

此方法有以下几个优点：

您的Web设计人员仍会在HTML中看到href，无需您的帮助或需要查看JavaScript代码即可阅读和理解HTML。他们不仅会看到他们习惯看到的熟悉模式，而且可能会与他们建立更好的工作关系。
抓住您网站的搜索引擎将能够阅读这些链接并关注它们。
没有JavaScript的浏览器将能够处理链接。有些人似乎关心这一点。我不。但无论如何都值得一提。

总之，您更容易在HTML中进行管理。通过使用该技术，可以消除你是理所当然关心代码的重复，而且移动内容回HTML，因为你的直觉告诉你是做正确的事。您的代码不仅更具可读性，而且您的SEO结果也会更好。

在JavaScript中分配链接和类

1 个答案:

编写点击处理程序：

处理演示文稿：