超链接替换文本

hyperlink alternate text replacement

本文关键字：文本 替换 超链接      更新时间：2023-09-26

现在我有了这段代码，它用超链接替换了span类。该超链接包括一个缩写，并且该超链接的备选文本包括相同的缩写。现在我想做的是，以某种方式替换超链接的替代文本中的第二个缩写。所以这里没有"点击这里访问+'名称'缩写"，而是一个别名。因此，如果缩写是ggl，那么别名应该是google。但是超链接不应该使用这个别名。有人能帮我吗？thx

(function($) {
    var number = "1234567";
    function linkBuilder(abbreviation) {
        return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation + "</a>";
    }
    function linkBuilder2(abbreviation2) {
        return "<a href='https://www.test.com/" + abbreviation2 + "?sitenumber=" + number + "default'>Click here to visit " + abbreviation2 + "</a>";
    }
    jQuery(document).ready(function() {
        var fl = $(".first-link");
        if (fl.length > 0) {
            fl.html(linkBuilder(fl.data("abbreviation")));
        }
        var sl = $(".second-link");
        if (sl.length > 0) {
            sl.html(linkBuilder2(sl.data("abbreviation2")));
        }
    });
})(jQuery);

这是一个正在工作的jsfiddle：

https://jsfiddle.net/e7qdx031/1/

linkBuilder（）应该是可重用的，正如kalsoverus提到的那样。

另一件需要提及的事情是，下面的代码返回一个元素集合，而不仅仅是一个元素。

var fl = $(".first-link");
...
var sl = $(".second-link");

如果页面上有多个.first链接类，则您提供的代码将无法正常工作。因此，我会使用$.each（）对每个元素进行迭代，并分别对它们运行linkBuilder（）函数。

至于linkBuilder函数，我会修改它以接受元素对象，然后读取属性以检索别名和名称。全名是您似乎表示需要的东西，但代码中没有。

(function($) {
    var number = "123456";
    function linkBuilder($obj) {
        var abbreviation = $obj.data('abbreviation');
        var name = $obj.data('name');
        return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + name + "</a>";
    }
    jQuery(document).ready(function() {
        $('.first-link, .second-link').each(function(index, obj){
            $(obj).html(linkBuilder($(obj)));
        });
    });
})(jQuery);

您可能想要的是这样的东西：

function linkBuilder(abbreviation, alias) {
    return "<a href='https://www.test.com/" + abbreviation + "?sitenumber=" + number + "default'>Click here to visit " + alias + "</a>";
}

只需将链接所需的显示名称作为第二个参数传递即可。

相关文章：