クリック時に1文字目を切り替え

クリック時に1文字目を切り替え

jQuery

以前紹介した「toggleメソッドを使用した表示・非表示の切り替え」で表示の切り替えができましたので、今度はクリックする文字を変更してみましょう。文字を切り替えることによって視覚的に開閉が少しわかりやすくなるかもしれませんね。

クリックする1文字目を変更

今回はaタグで囲った文字列を取得し、さらに1文字目を切り替えてみましょう!!
[html highlight=”12,13,14,15,16″]
<style>
#toggle{
display: none;
border: 1px #999999 solid;
padding: 5px;
}
</style>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").on("click", function(){
if( $("a").text().slice(0, 1) == "▼"){
$("a").text("▲"+ $(‘a’).text().slice(1) );
} else {
$("a").text("▼"+ $(‘a’).text().slice(1) );
}

$("#toggle").toggle();
});
});
</script>
<a href="javascript:;">▼クリックすると表示・非表示が切り替わります。</a>
<div id="show">toggleメソッドを使って表示・非表示が切り替わります!!</div>
[/html]
サンプル
クリックしたリンクの一文字目の「▼」をみてみましょう!クリックするたびに「▼」「▲」が切り替わっているのがわかると思います!
何をしているかといいますと、12行目~16行目までif文の条件分岐がありますね。その中でも

.text()
指定したタグ(今回ならaタグ)で囲った文字列を取得・変更します。

.text()
文字を取得します。
.text(“変更後の文字列”)
括弧の中に任意の文字列を書くと文字を変更できます。
.slice()
文字通り、文字を切り取って取り出します。

.slice(●)
引数が1つの場合は、最初の文字から設定値まで切り取り、それ以降を取り出します。
例:”jQuery”.slice(2) は “ery”
.slice(●, ●)
引数が2つの場合は、開始位置(左)から終了位置(右)の1つ前までを取り出します。
例:”jQuery”.slice(1,4) は “Que”
※1文字目は0から始まります。

上記のことを踏まえてif文でしていることは
「aタグの1文字目が”▼”だったら・・・」
ということをしていることがわかりますね。
条件が通った後は、aタグのテキストを1文字目に▼(▲)、その後ろに取得した文字の2文字目からを足しています。
今回は色々と組み合わせてみましたが、条件分岐ができるようになるとプログラムを組むのに幅が広がり楽しくなりそうですね^^
ホントは変数に代入してとかしたほうがいいのですが、それについてはおいおい書いていこうかなと思います。ではでは。

1文字目を変更するには
・「.text()」で文字列を取得
・「.slice()」で文字を切り取り、取り出し
・条件分岐を設定
・「.text(“変更後の文字列”)」で文字列を変更