超链接替换文本替换

时间:2016-07-26 14:08:36

标签: javascript html alias alternate

目前我已经有了这个代码,它取代了带有超链接的span类。超链接包括缩写,并且超链接的替代texxt包括相同的缩写。现在我想做的是,以某种方式替换超链接的替代文本中的第二个缩写。因此,没有“点击此处访问+'名称缩写”,而是别名。因此,如果abbreviaton是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);

2 个答案:

答案 0 :(得分:1)

你可能想要的是这样的:

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

只需将您想要链接的显示名称作为第二个参数传递。

答案 1 :(得分:1)

这是一个有效的jsfiddle:

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

linkBuilder()应该可以重复使用,正如kalsowerus所提到的那样。

应该提到的另一件事是,以下代码返回元素集合,而不仅仅是单个元素。

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

如果页面上有多个.first-link类,则您提供的代码将无法正常运行。所以我会使用$ .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);