投稿日:

jQuery　idを書き換える

Ajax

jQuery　idを書き換える

IDの書き換えについては、addClassのような関数がありません。

attr(‘id’, “書き変えたい内容”);
とやって書き換えます。

サンプル

 //html
 <div id="hogehoge" class="hoge">
    ほげほげ
 </div>

 //Javascript
 $('#hogehoge').attr('id', "geho");
投稿日:

jQuery 要素をコピーして追加し、IDを書き換える

Ajax

jQuery 要素をコピーして追加し、IDを書き換える

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に追加
 }
  • 役に立ちました。でも文脈からすると要素名はrootではなくrouteかな？とおもいました — {2017-06-22 (木) 10:27:55}
投稿日:

jQuery 特定のidの下の特定の要素を取得

Ajax

jQuery 特定のidの下の特定の要素を取得

htmlの方が

 <div id="hogehoge">
    <span id="2">ほげほげ2</span>
    <span id="3">ほげほげ3</span>
 </div>

というコードだった時、idがhohogeで、さらにその下のid=3の要素を取得するにはfindを利用します。

 $('#hogehoge').find("#3")
投稿日:

jQuery 大きな図に、部分的に説明をつける

jQuery 大きな図に、部分的に説明をつける

イメージマップ　マウスオーバーでエリアの説明を表示

Ajax
Javascript

何か大きな図があって、その部分部分の説明を表示させたい、ということは往々にしてあると思います。

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips
さんで紹介されていた、jQueryを利用したTooltipsを応用して、ちゃちゃっと作りたいと思います。

  1. まず、該当の図に、イメージマップ
    を作っておきます。
  2. タグに、title属性をつけます。このtitle属性が、拡大されて表示されます。 
    3.  <area shape="rect" coords="19,120,92,173" href="#" target="マウスオーバーテスト"
 alt="マウスオーバーテスト" title="マウスオーバーテスト<br>" />
    1. 上記のサイトさんで紹介されていたように、Javascript、CSSを読み込ませます。jQueryも読み込ませるのを忘れないように！[huh]
    2. javascriptの最後の一文を、次のように書き換えます。 
      3.  $(document).ready(function(){
 //これを下記に変更　 simple_tooltip("a","tooltip");
 	 simple_tooltip("area","tooltip");
 });

      サンプルはこちらでどうぞ。
      http://onlineconsultant.tv/bda-2011/test/image_mouseover_test.html

      • フッターに謎の空白ができてしまい、困っています。image_mouseover_test.jsを読み込まない他のページはきちんと表示されます。誰か助けて下さい！よろしくお願いします — よしお {2017-01-17 (火) 15:43:28}
      • div.tooltip内にtop: 0;を追加で、解決しました。お騒がせしました — よしお {2017-01-17 (火) 15:51:41}
      • ポップアップを画像だけにしたいのですが、グレーの帯とテキストを消すことができません。教えていただけますでしょうか。 — 野田です {2017-09-04 (月) 13:24:40}
      • 野田ですさん、申し訳ありません。そういったサポートはこちらでは行っていません。質問サイトなどで質問してみてください。よろしくお願いいたします。 — 中の人 {2017-09-04 (月) 16:32:09}
投稿日:

jQuery 外部サイトへのリンクは別ウィンドウで開く

Ajax

jQueryを利用して外部サイトへのリンクは別ウィンドウで開く

Web制作の現場では、Webサイトを作り終わってようやく納品と言う時に、お客様から
「あー、外部のサイトへのリンクは全部別ウィンドウで開くようにしてください」
と言われたりすることがありますよね。

リンクは全部ページに書き込んでいるで、それを修正するのはとても大変、という場合、下記のスクリプトを用立ててください。

外部のサイトだったら別窓にしましょう、というtarget=’_blank’という属性をjQueryで付け加えてます。

 //これ以前に、jQueryの読み込みはやっておいてください。
 $('a').filter(function(){
 	return (new RegExp('http:\/\/(?!'+location.hostname +')')).test(this.href);
 								   }
 	).attr('target','_blank');