Wonderful! WordPress

リンク先を変更したり逆順にするJavascript

♠

この記事は公開または最後に更新されてから1232日が経過しています。情報が古くなっている可能性があるのでご注意下さい。

ちょっと良く使うことで、タグクラウドに並んでいるa タグのリンク先を切り替えられて二つ設定出来れば便利だということになって。
通常のここのタグクラウドは以下のようなhtml になっています。
ちなみにリンク先を変更するためと逆順にするためのボタン用のｐタグが既に付加されています。

<aside>
	<ul>
		<li class="widget" id="tag_cloud">
			<h2>Bird names list</h2>
			<p id="changelink" title="リンク先をimageviewerからtagページに変更します">Imv</p>
			<p id="revlist" title="リストを逆順に並び替えます">Reverse</p>
			<p id="taglist">
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xiceland_gull" class="imgtags2" title="122枚">アイスランドカモメ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xcommon_greenshank" class="imgtags4" title="263枚">アオアシシギ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xjapanese_green_woodpecker" class="imgtags2" title="76枚">アオゲラ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xgrey_heron" class="imgtags1" title="22枚">アオサギ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xsolitary_snipe" class="imgtags2" title="98枚">アオシギ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xblack-faced_bunting" class="imgtags3" title="145枚">アオジ</a>&ensp;
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xbrown_hawk-owl" class="imgtags4" title="277枚">アオバズク</a>&ensp;
				/***  途中省略  ***/
				<a href="https://strix.main.jp/?page_id=48&amp;tagname=xglaucous-winged_gull" class="imgtags1" title="12枚">ワシカモメ</a>&ensp;
			</p>
		</li>
	</ul>
</aside>
HTML
CopyExpand‹›

この場合のリンク先で”https://strix.main.jp/?page_id=48&amp;tagname=xiceland_gull”というのは鳥種を絞り込んでの画像一覧ページへのリンクとなっているのですが、これを切り替えてリンク先をタグページへの”https://strix.main.jp/?tag=iceland_gull”にしたいという目論見。
ここは未だほとんどのページがjQuery ではなくJavascript なので。
javascript が無いと必要がないので、そのボタンもjavascript によって表示するようにして、前半はその処理。後半も別になんてことはなくて、onclick イベントに登録しているだけのこと。

var changelinkflg = 0;

window.onload = function() {
	var doc = document;

	if ( null != doc.getElementById( 'changelink' ) ) {
		doc.getElementById( 'changelink' ).style.visibility = 'visible';

		doc.getElementById( 'changelink' ).onclick = function() {
			if ( 0 == changelinkflg ) {
				changelinkflg = 1;
				doc.getElementById( 'changelink' ).style.backgroundColor = "#ffffff";
				doc.getElementById( 'changelink' ).innerHTML = "Tag";
			} else {
				changelinkflg = 0;
				doc.getElementById( 'changelink' ).style.backgroundColor = "transparent";
				doc.getElementById( 'changelink' ).innerHTML = "Imv";
			}
		}

		var taglist = doc.getElementById( 'taglist' ),
			childlink = taglist.getElementsByTagName( 'a' ),//子要素のa タグを取得
			cllength = childlink.length;

		for ( var i = 0; i < cllength; i++ ) {
			childlink[ i ].onclick = function() {
				if ( 1 == changelinkflg ) {
					var tarlink = this.getAttribute( 'href' );
					tarlink = tarlink.replace( '?page_id=48&tagname=x', '?tag=' );
					location.href = tarlink;
					return false;
				}
			}
		}
	}
}
JavaScript
CopyExpand‹›

ついでにこの一つ前のページ『右クリックのログとかリストの逆順表示とかのjQuery』で、jQuery でやったリストを逆順に表示させる機能もつけてしまおうと。
逆順にするだけの処理はというと、同じように子要素のa タグを取得して、そのオブジェクトからouterHTML で元々のhtml を得て文字列としてつなげて一つにしたもので、innerHTML にて置き換えるという具合にしました。 そして、上のリンク先変更の部分と一緒にまとめてしまおうということなのですが、それにはちょっと問題が発生するのでひとくふう必要でした。

というのは、逆順にする処理において子要素のリストをinnerHTML を使ってすっかり入れ替えてしまっているので、window.onload で登録したリンク先を変更するonclick イベントも無くなってしまいます。
それゆえにそのリンク先を変更するのに使用したonclick イベントへの登録はやめて、changelink ボタンをクリックした時にすべてのリンク先を変更してしまう方法に変更しています。
なお、この下の部分、2018/4/22に更新しています。というのは、以前のものはもくろみどおりでなかったり、実はミスコードでちゃんと動かないものだったりしたのです。いやはやなんとも、かなしか～！

var changelinkflg = 0,
	revflg = 0;

window.onload = function() {
	var doc = document;

	if ( null != doc.getElementById( 'changelink' ) ){

		doc.getElementById( 'changelink' ).style.visibility = 'visible';
		doc.getElementById( 'revlist' ).style.visibility = 'visible';

		//リンク先を変更する処理
		doc.getElementById( 'changelink' ).onclick = function() {
			if ( 0 == changelinkflg ) {
				changelinkflg = 1;
				doc.getElementById( 'changelink' ).style.backgroundColor = '#ffffff';
				doc.getElementById( 'changelink' ).innerHTML = 'Tag';
			} else {
				changelinkflg = 0;
				doc.getElementById( 'changelink' ).style.backgroundColor = 'transparent';
				doc.getElementById( 'changelink' ).innerHTML = 'Imv';
			}

			var taglist,
				childlink,
				cllength = 0,
				tarlink;

			taglist = doc.getElementById( 'taglist' );
			if ( null != taglist ) {
				childlink = taglist.getElementsByTagName( 'a' );
				if ( null != childlink ) {
					cllength = childlink.length;
				}
			}

			for ( var i = 0; i < cllength; i++){
				tarlink = childlink[ i ].getAttribute( 'href' );
				if ( 1 == changelinkflg ) {
					tarlink = tarlink.replace( '?page_id=48&tagname=x', '?tag=' );
				} else {
					tarlink = tarlink.replace( '?tag=', '?page_id=48&tagname=x' );
				}
				childlink[ i ].setAttribute( 'href', tarlink );
			}
		}

		// リストを逆順にする処理
		doc.getElementById( 'revlist' ).onclick = function() {

			var taglist,
				childlink,
				cllength,
				revelist = '',
				ensp = '&ensp;';

			taglist = doc.getElementById( 'taglist' );
			if ( null != taglist ) {
				childlink = taglist.getElementsByTagName( 'a' );
				if ( null != childlink ) {
					cllength = childlink.length;
				}
			}

			for ( var i = 0; i < cllength; i++ ) {
				revelist = childlink[ i ].outerHTML + ensp + revelist;
				if ( ( i + 1 ) === cllength ) {
					taglist.innerHTML = revelist;
					if ( 0 === revflg ) {
						doc.getElementById( 'revlist' ).style.backgroundColor = '#ffffff';
						doc.getElementById( 'revlist' ).innerHTML = 'Descend';
						revflg = 1;
					} else {
						doc.getElementById( 'revlist' ).style.backgroundColor = 'transparent';
						doc.getElementById( 'revlist' ).innerHTML = 'Ascend';
						revflg = 0;
					}
				}
			}
		}
	}
}
JavaScript
CopyExpand‹›‹›

全く同じ機能をjQuery でということになるわけですが、もともとが同じものなのだから同じことをやればいいんだけれども、なかなかそれが難しかったりする。
こちらもクリックイベントを登録するのではなく、リンク先変更ボタンをクリックした時に、全てのa タグのリンク先（href）を書き換えてしまう同じ方法です。

jQuery( function() {
	var revflg = 0,
		changeflg = 0;

	if ( jQuery( '#changelink' ).length ) {
		jQuery( '#changelink' ).css( 'visibility','visible' );
		jQuery( '#revlist' ).css( 'visibility','visible' );

		jQuery( '#revlist' ).click(function() {
			if ( 0 == revflg ) {
				revflg = 1;
				jQuery( '#revlist' ).css( 'backgroundColor', '#ffffff' ).text( 'Ascend' );
			} else {
				revflg = 0;
				jQuery( '#revlist' ).css( 'backgroundColor', 'transparent' ).text( 'Descend' );
			}
			jQuery( '#taglist' ).html( jQuery( '#taglist' ).contents().get().reverse());
		});

		jQuery( '#changelink' ).click(function() {
			var curlink,
				chglink;

			if ( 0 == changeflg ) {
				changeflg = 1;
				jQuery( '#changelink' ).css( 'backgroundColor', '#ffffff' ).text( 'Imv' );
				curlink = '?tag=';
				chglink = '?page_id=48&tagname=x';
			} else {
				changeflg = 0;
				jQuery( '#changelink' ).css( 'backgroundColor', 'transparent' ).text( 'Tag' );
				curlink = '?page_id=48&tagname=x';
				chglink = '?tag=';
			}

			jQuery( '#taglist a' ).each(function( i ) {
				var tarlink = jQuery( this ).attr( 'href' );
				tarlink = tarlink.replace( curlink, chglink );
				jQuery( this ).attr( 'href', tarlink );
			});
		});
	}
});
JavaScript
CopyExpand‹›

で、この下の部分は自分用の本当の備忘録というか、実際にこのサイトで使用しているコード。
というのは、ブラウザの言語設定が日本語とその他の場合（英語表示となる）でタグクラウドの表示も変えていて、英語の場合は英名となるのであるが、英名は長いのでタグクラウドではなく、単純に<li>タグでリスト表示にしてます。日本語表示と違い、<a>タグの親要素が<li>タグとなるのでそのあたりの処理の変更が必要となったというわけですね。

var changelinkflg = 0,
	revflg = 0;

window.onload = function() {
	var doc = document;

	if ( null != doc.getElementById( 'changelink' ) ){

		doc.getElementById( 'changelink' ).style.visibility = 'visible';
		doc.getElementById( 'revlist' ).style.visibility = 'visible';

		//リンク先を変更する処理
		doc.getElementById( 'changelink' ).onclick = function() {
			if ( 0 == changelinkflg ) {
				changelinkflg = 1;
				doc.getElementById( 'changelink' ).style.backgroundColor = '#ffffff';
				doc.getElementById( 'changelink' ).innerHTML = 'Tag';
			} else {
				changelinkflg = 0;
				doc.getElementById( 'changelink' ).style.backgroundColor = 'transparent';
				doc.getElementById( 'changelink' ).innerHTML = 'Imv';
			}

			var taglist,
				childlink,
				cllength = 0,
				tagflg = 't',
				tarlink;

			// 日本語表示の場合
			if ( null != doc.getElementById( 'taglist' ) ) {
				tagflg = 't';
				taglist = doc.getElementById( 'taglist' );
				if ( null != taglist ) {
					childlink = taglist.getElementsByTagName( 'a' );
				}
			// 英語表示の場合　aタグの親要素はliタグとなる
			} else if ( null != doc.getElementById( 'engtags' ) ) {
				var tmpchild;
				tagflg = 'e';
				taglist = doc.getElementById( 'engtags' );
				if ( null != taglist ) {
					childlink = taglist.getElementsByTagName( 'li' );
				}
			}
			if ( null != childlink ) {
				cllength = childlink.length;
			}

			for ( var i = 0; i < cllength; i++){
				if ( 't' === tagflg ) {
					tarlink = childlink[ i ].getAttribute( 'href' );
				} else {
					tmpchild = childlink[ i ].children;
					tarlink = tmpchild[0].getAttribute( 'href' );
				}
				if ( 1 == changelinkflg ) {
					tarlink = tarlink.replace( '?page_id=48&tagname=x', '?tag=' );
				} else {
					tarlink = tarlink.replace( '?tag=', '?page_id=48&tagname=x' );
				}
				if ( 't' === tagflg ) {
					childlink[ i ].setAttribute( 'href', tarlink );
				} else {
					tmpchild[0].setAttribute( 'href', tarlink );
				}
			}
		}

		doc.getElementById( 'revlist' ).onclick = function() {

			var taglist,
				childlink,
				cllength,
				revelist = '',
				ensp = '&ensp;';

			if ( null != doc.getElementById( 'taglist' ) ) {
				taglist = doc.getElementById( 'taglist' );
				childlink = taglist.getElementsByTagName( 'a' );
			} else if ( null != doc.getElementById( 'engtags' ) ) {
				taglist = doc.getElementById( 'engtags' );
				childlink = taglist.getElementsByTagName( 'li');
				ensp = '';
			}
			if ( null != childlink ) {
				cllength = childlink.length;
			}

			for ( var i = 0; i < cllength; i++){
				revelist = childlink[i].outerHTML + ensp + revelist;
				if ( ( i + 1 ) === cllength ) {
					taglist.innerHTML = revelist;
					if ( 0 === revflg ) {
						doc.getElementById("revlist").style.backgroundColor = "#ffffff";
						doc.getElementById("revlist").innerHTML = "Descend";
						revflg = 1;
					} else {
						doc.getElementById("revlist").style.backgroundColor = "transparent";
						doc.getElementById("revlist").innerHTML = "Ascend";
						revflg = 0;
					}
				}
			}
		}
	}
}
JavaScript
CopyExpand‹›‹›‹›

Post : 2015/10/11 13:45

Leave a Reply！

JavaScript is necessary to send a comment.
You can edit and delete your comment if you input a edit key.
Edit key is necessary for attesting you when you edit and delete it.
The tag of HTML cannot be used in comment.
When you comment for the first time, it is displayed after the approval of the administrator.
Because I cannot speak English so much, it takes time to answer.
Required fields are marked *.

※Please enter more than 5 characters only alphabets.
※Edit or delete are possible for 2000 days after approval.

 *

♠Simplistic Comment User Editable v4.0

♠When visitors leave comments on the site this site collect the data shown in the comments form, and also the visitor’s IP address and browser user agent string to help spam detection.
♠This site does not use cookie when visitors leave comments and commenter edit comment.
♠This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comments feed

Trackback URL : https://strix.main.jp/wp-trackback.php?p=59330

Sanbanse Funabashi
2010.10.24 sunrise

Top

スクロールさせるか画像をクリックすると元に戻ります。