在 JavaScript 中分配链接和类

Assign links and classes in JavaScript

本文关键字：链接 分配 JavaScript      更新时间：2023-09-26

我有一个英语和西班牙语的网站，在网站的每个页面中都有一个指向该特定页面的西班牙语版本的链接，所以如果用户在"主页.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 个链接(主页.php、服务.php、aboutus.php、contact.php(，西班牙语版本也是如此(带有相应的 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();
}

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

这种方法有几个优点：

  • 你的网页设计师仍然会在HTML中看到href，并且可以阅读和理解HTML，而不需要你的帮助或去看JavaScript代码。他们不仅会看到他们习惯看到的熟悉模式，而且您可能会与他们建立更好的工作关系。

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

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

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

相关文章：