Javascript：将函数结果嵌入到HREF中

Question

我有一个重新格式化链接的JavaScript函数。 单击HREF链接后，我需要执行此方法才能完成HREF的创建。

JS方法示例：

function fixURL (dest, val){
   return dest + val;
}

我有一个常规的HREF，并且想结合上述方法的结果来创建：

<a href="http://www.site.com/" + fixURL('poo','no')>Click me!</a>

这可能吗？这样做是否理想？

Answer 1

您可以使用onclick处理程序。 请注意，通常最好不要使用诸如onclick="something..."类的内联事件处理程序 ，因此这只是出于演示目的。

另外，这将尝试使用搜索结果打开新的窗口/选项卡。

<a target="_blank"
   href="https://www.google.com/search?q=chris+rock"
   rel="chris+rock|dave+chappelle"
   onclick="fixURL(this)">Test</a>

function fixURL(el){
    var vals = el.rel.split('|');
    el.href = el.href.replace(vals[0],vals[1]);
}

http://jsfiddle.net/sxtuz/1/

相同的效果，仅使用DOM事件处理程序。 注意id="fixme"属性。

<a id="fixme"
   target="_blank"
   href="https://www.google.com/search?q=chris+rock"
   rel="chris+rock|dave+chappelle">Test</a>

function fixURL(el){
    var vals = el.rel.split('|');
    el.href = el.href.replace(vals[0],vals[1]);
}
window.onload = function(){
    document.getElementById('fixme').onclick = function(){
        fixURL(this);
    };
}

http://jsfiddle.net/sxtuz/

Answer 2

您可以将函数的结果嵌入href ，是的，但是函数调用不能在HTML中内联。 尝试这个：

<a href="http://www.example.com/">A link</a>
<script type="text/javascript">
    !function(links) {
        links[links.length-1].href+=fixURL('arg1', 'arg2');
    }(document.getElementsByTagName('a'));
</script>

Answer 3

如果您将其保留为：

<a href="http://www.site.com/">Click Me!</a>

然后，您可以使用jQuery执行以下操作：

$("a[href='http://www.site.com/']").attr("href", "http://www.site.com/" + fixURL('poo','no'))

说明：

$("a[href='http://www.site.com/']")匹配一个元素，该元素的现有href等于http://www.site.com/ ，然后将其href属性更改为您传入的第二个参数。在这种情况下， "http://www.site.com/" + fixURL('poo','no')