UNIRRY

WEBデザインとホロスコープと宇宙のブログ

複数個所のテキスト数字を画像文字に置き換えるjs

numb2

前回やった「jQueryでテキスト数字を画像文字に置き換えてみた」で数字にしたいところがそこかしこにあった場合は全部同じ数字に変わってしまうなーということがわかったので、何カ所あってもうまくいくようにコードを変更しました。

jQueryで複数個所のテキスト数字を画像文字に置き換えるjs

$(function () {
  $(".numb").each(function(){
    //数字テキストを変数に格納
    var numb = $(this).text();
    
    //とりあえずdivの中身を空にする
    $(this).empty();
    
    //1文字づつ配列に格納する
    var numarr = numb.split("");
    
    //spanタグで囲ってdiv内にappendする
    var newnum = [];
    for ( i=0; i < numarr.length; i++ ) {
      $(this).append("<span class='num" + numarr[i] + "'>" + numarr[i] + "</span>");
    }
  });
});

class指定にして、eachでまわすことにしました。いっぱいあっても置き換えれたほうが全然使えそうです。cssは前回とまったく同じです。
jQueryでテキスト数字を画像文字に置き換えてみた

css

.numb {
height: 47px;
}
.numb span {
text-indent: -9999px;
height: 47px;
padding: 0 3px;
float: left;
display: block;
}
.numb span.num1 {
background: url(./1.jpg) no-repeat left top;
width: 21px;
}
.numb span.num2 {
background: url(./2.jpg) no-repeat left top;
width: 47px;
}
.numb span.num3 {
background: url(./3.jpg) no-repeat left top;
width: 43px;
}
.numb span.num4 {
background: url(./4.jpg) no-repeat left top;
width: 49px;
}
.numb span.num5 {
background: url(./5.jpg) no-repeat left top;
width: 43px;
}
.numb span.num6 {
background: url(./6.jpg) no-repeat left top;
width: 47px;
}
.numb span.num7 {
background: url(./7.jpg) no-repeat left top;
width: 45px;
}
.numb span.num8 {
background: url(./8.jpg) no-repeat left top;
width: 45px;
}
.numb span.num9 {
background: url(./9.jpg) no-repeat left top;
width: 46px;
}
.numb span.num0 {
background: url(./0.jpg) no-repeat left top;
width: 47px;
}

html

<div class="numb">324</div><br>
<div class="numb">1234567890</div><br>
<div class="numb">000</div>

jQueryで複数個所のテキスト数字を画像文字に置き換えるサンプル

これがサンプル


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3