jQuery idを書き換える
IDの書き換えについては、addClassのような関数がありません。
attr(‘id’, “書き変えたい内容”);
とやって書き換えます。
サンプル
//html <div id="hogehoge" class="hoge"> ほげほげ </div>
//Javascript $('#hogehoge').attr('id', "geho");
IDの書き換えについては、addClassのような関数がありません。
attr(‘id’, “書き変えたい内容”);
とやって書き換えます。
//html <div id="hogehoge" class="hoge"> ほげほげ </div>
//Javascript $('#hogehoge').attr('id', "geho");
inputボックスの数を、ユーザーが任意に操作できるように、動的にinputボックスなどを追加したい場合があると思います。
//Html <div id="roots"> <div id="each_root"> <div class="detail"> <input type="text" name="root"> <input type="button" value="行き先を追加" onclick="addInput();"> </div> </div> </div>
//Javascript function addInput(){ $("#each_root").clone().appendTo("#roots"); }
ついでに、何かの用途のためにコピーした中身の、IDを連番でつけてそれぞれを識別したい場合、IDを次のように動的に書き換えます。
//Javascript 上記の改訂版 var i = 0; function addInput(){ i++; $("#each_root"). //#each_rootを取得 clone(true). //上で取得した中身をコピー find('.detail'). //そのコピーした中身のdetailとついている要素を取得 attr('id',i). //上で取得した要素の中のidをiとする appendTo("#roots"); //#rootsに追加 }
htmlの方が
<div id="hogehoge"> <span id="2">ほげほげ2</span> <span id="3">ほげほげ3</span> </div>
というコードだった時、idがhohogeで、さらにその下のid=3の要素を取得するにはfindを利用します。
$('#hogehoge').find("#3")
イメージマップ マウスオーバーでエリアの説明を表示
何か大きな図があって、その部分部分の説明を表示させたい、ということは往々にしてあると思います。
CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips
さんで紹介されていた、jQueryを利用したTooltipsを応用して、ちゃちゃっと作りたいと思います。
<area shape="rect" coords="19,120,92,173" href="#" target="マウスオーバーテスト" alt="マウスオーバーテスト" title="マウスオーバーテスト<br>" />
$(document).ready(function(){ //これを下記に変更 simple_tooltip("a","tooltip"); simple_tooltip("area","tooltip"); });
サンプルはこちらでどうぞ。
http://onlineconsultant.tv/bda-2011/test/image_mouseover_test.html
Web制作の現場では、Webサイトを作り終わってようやく納品と言う時に、お客様から
「あー、外部のサイトへのリンクは全部別ウィンドウで開くようにしてください」
と言われたりすることがありますよね。
リンクは全部ページに書き込んでいるで、それを修正するのはとても大変、という場合、下記のスクリプトを用立ててください。
外部のサイトだったら別窓にしましょう、というtarget=’_blank’という属性をjQueryで付け加えてます。
//これ以前に、jQueryの読み込みはやっておいてください。 $('a').filter(function(){ return (new RegExp('http:\/\/(?!'+location.hostname +')')).test(this.href); } ).attr('target','_blank');