为什么 HREF 属性的值与上一个相加

Question

我正在创建一个代码，它将自动在每个 HTML 页面中设置共享按钮链接。

这是一段代码。

<script>

	x = window.location.href;
	var fbl = "http://www.facebook.com/sharer.php?u=";
	var twitterl = "Hi%20!!!%20Check%20Out%20This%20Awesome%20Trick%20Now%20...%20:)%20Dont Miss It.%20";
	var gplusl = "http://plus.google.com/share?url=";
	var pinterestl = "http://pinterest.com/pinthis?url=";

	var fblink = document.getElementById("fb");
	var fbHref = fblink.getAttribute('href');
	fblink.setAttribute('href', fbHref + fbl + x);

	var twitterlink = document.getElementById("fb");
	var twitterHref = twitterlink.getAttribute('href');
	twitterlink.setAttribute('href', twitterHref + twitterl + x);

	var gpluslink = document.getElementById("fb");
	var gplusHref = twitterlink.getAttribute('href');
	gpluslink.setAttribute('href', gplusHref + gplusl + x);

	var pinterestlink = document.getElementById("fb");
	var pinterestHref = twitterlink.getAttribute('href');
	pinterestlink.setAttribute('href', pinterestHref + pinterestl + x);

</script>

<div>
	<h4>Share This Page</h4>
		<a id="fb" href="" title="Share in Facebook" target="_blank" rel="nofollow"><img src="image/facebook.png" alt="Facebook" title="Facebook"></img></a>
		<a id="twitter" href="" title="Share in Twitter" target="_blank" rel="nofollow"><img src="image/twitter.png" alt="Twitter" title="Twitter"></img></a>
		<a id="gplus" href="" title="Share in Google Plus" target="_blank" rel="nofollow"><img src="image/gplus.png" alt="Google Plus" title="Google Plus"></img></a>
		<a id="pinterest" href="" title="Share in Pinterest" target="_blank" rel="nofollow"><img src="image/pinterest.png" alt="Pinterest" title="Pinterest"></img></a>
		</br></br>
</div>

这段代码的问题是，href 属性是逐渐加起来的。

我希望 Facebook 链接为 http://www.facebook.com/sharer.php?u=currentpagelink。

Answer 1

看看你是否需要这个：Use proper Id's for related a tags，你可以直接使用document.getElementById("fb").href获取href。

<div>
	<h4>Share This Page</h4>
		<a id="fb" href="" title="Share in Facebook" target="_blank" rel="nofollow"><img src="image/facebook.png" alt="Facebook" title="Facebook"></img></a>
		<a id="twitter" href="" title="Share in Twitter" target="_blank" rel="nofollow"><img src="image/twitter.png" alt="Twitter" title="Twitter"></img></a>
		<a id="gplus" href="" title="Share in Google Plus" target="_blank" rel="nofollow"><img src="image/gplus.png" alt="Google Plus" title="Google Plus"></img></a>
		<a id="pinterest" href="" title="Share in Pinterest" target="_blank" rel="nofollow"><img src="image/pinterest.png" alt="Pinterest" title="Pinterest"></img></a>
		</br></br>
</div>

<script>

	x = window.location.href;
	var fbl = "http://www.facebook.com/sharer.php?u=";
	var twitterl = "Hi%20!!!%20Check%20Out%20This%20Awesome%20Trick%20Now%20...%20:)%20Dont Miss It.%20";
	var gplusl = "http://plus.google.com/share?url=";
	var pinterestl = "http://pinterest.com/pinthis?url=";

	var fblink = document.getElementById("fb");
	fblink.href=fbl + x;

	var twitterlink = document.getElementById("twitter");
	
	twitterlink.href=twitterl + x;

	var gpluslink = document.getElementById("gplus");
	gpluslink.href=gplusl + x;

	var pinterestlink = document.getElementById("pinterest");
	pinterestlink.href=pinterestl + x;

</script>

Answer 2

您始终使用相同的 ID (fb)，而不是使用要更改的链接的 ID：

var fblink = document.getElementById("fb");
//                                   ^^^^
var twitterlink = document.getElementById("fb"); // should be "twitter"
//                                        ^^^^
// etc

使用正确的 ID 即可。