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

Question

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

这是一段代码。

＆＃13;

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

此代码的问题是，href属性逐渐累加在一起。

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

Answer 1

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

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

使用正确的ID，它将起作用。

Answer 2

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;