-
以下の記事では HTMLオブジェクト要素を表示・非表示するために JQuery メソッドの show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle を使いました。
（⇒JavaScript JQuery Effects関連のメソッドの使い方（show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle））
今回は要素に対して最終的な CSS の値を指定して、それになるまでの動きをさせる JQuery メソッドの animate ついて説明します。
■このページの内容
■animate メソッドの書式
JQuery メソッドの animate の書式は以下の通りです。//animateの書式 .animate( cssproperties [, duration] [, easing] [, complete] ) .animate( cssproperties, options ) 1.0追加 // cssproperties : CSSプロパティオブジェクト（複数指定可） // [duration] : フェードするアニメーション時間を指定(数値型と文字列型) // ・数値型はミリ秒の値 // ・文字列型は "slow"(600ミリ秒) "fast"(200ミリ秒) の値 // [easing] : アニメーションの変化の種類を指定（"linear","swing"） // ・"linear" を指定すると直線的に変化 // ・"swing" を指定すると最初ゆっくり動きだし最後の方は早く変化 // [callback] : アニメーション完了後に実行したい関数を指定 // options : duration等をオブジェクトで指定 //
■animate メソッドの簡単な例
それでは animate の簡単な例を以下に示します。 この例は div で囲まれた要素の透明度である opacity を通常から「0.5」へ、さらに「0.5」から通常にする処理です。<html> <head> <meta charset="utf-8"> <title>test animate</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //透明度0.5処理 function animateOpacityHalf() { $("#menu").animate({ opacity: 0.5 // 透明度0.5へ }, 1000 ); } //透明度1.0処理 function animateOpacityNormal() { $("#menu").animate({ opacity: 1.0 // 透明度1.0へ }, 1000 ); } </script> </head> <body> <h2>test animate</h2> <div id="menu"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateOpacityHalf();">OpacityHalf</button> <button onclick="animateOpacityNormal();">OpacityNormal</button> </body> </html>■CSS プロパティを複数設定する
上記の簡単な例では opacity のみを指定しましたが、 以下の例では marginLeft marginTop の2個を追加しました。
CSS プロパティで指定できるのは値として数値であるものです。 例では marginLeft にはピクセル値を設定していますが、これは数値として判断できるためです。 なお、単位として % や em も使える様です。<html> <head> <meta charset="utf-8"> <title>test animate</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //透明度0.5処理 function animateOpacityHalf() { $("#menu").animate({ opacity: 0.5, // 透明度0.5へ marginLeft: "100px",// 左マージン100px marginTop: "100px" // 上マージン100px }, 1000 ); } //透明度1.0処理 function animateOpacityNormal() { $("#menu").animate({ opacity: 1.0, // 透明度1.0へ marginLeft: "0px", // 左マージン0px marginTop: "0px" // 上マージン0px }, 1000 ); } </script> </head> <body> <h2>test animate</h2> <div id="menu"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateOpacityHalf();">OpacityHalf</button> <button onclick="animateOpacityNormal();">OpacityNormal</button> </body> </html>
上の例は div で囲まれた領域が「OpacityHalf」ボタンでは右下に移動し、「OpacityNormal」ボタンでは左上に戻った様に表示されます。
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
PR -
以前、ウインドウ的に div 領域を表示・非表示するために JQuery メソッドの fadeIn, fadeOut を使いましたが、
（⇒JavaScript jQueryでモーダルウインドウ風の表示をする方法（css:display, css:z-index, fadeIn, fadeOut））
今回は要素に対する表示について表示・非表示処理をより細かく制御できる JQuery メソッドについて説明します。
■このページの内容
- 先ずはオブジェクトの表示・非表示の簡単な例
- 各種の JQuery メソッド
- easing の指定（変化速度）
- easing の指定（変化速度）jQuery UI Effect プラグインを導入
- フェードイン・アウト処理（コールバック関数の例を含む）
■先ずはオブジェクトの表示・非表示の簡単な例
JQuery メソッドの show, hide を使い div HTMLオブジェクトを表示・非表示の処理を行います。<html> <head> <meta charset="utf-8"> <title>先ずはオブジェクトの表示・非表示の簡単な例</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncShow() { $("#menu").show(); } //非表示処理 function fncHide() { $("#menu").hide(); } </script> </head> <body> <h2>先ずはオブジェクトの表示・非表示の簡単な例</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShow();">表示</button> <button onclick="fncHide();">非表示</button> </body> </html>この show, hide には引数が指定でき、表示・非表示にアニメーション的な動きを付加できます。 アニメーションと言っても漫画的な動きでは無く、表示していく動作の時間を指定したりして、画面上では連続的な変化が付けられます。
それでは、以下に各種の JQuery メソッドの説明を記します。
■各種の JQuery メソッド
関数 書式 説明 show .show() .show( duration [, callback] ) .show( [duration] [, easing] [, callback] ) .show( [options] ) duration:フェードするアニメーション時間を指定 easing :アニメーションの変化の種類を指定 callback:アニメーション完了後に実行したい関数を指定 options :duration等をオブジェクトで指定
表示処理を行う hide .hide() .hide( duration [, callback] ) .hide( [duration] [, easing] [, callback] ) .hide( [options] ) ※引数は show と同様非表示処理を行う toggle .toggle() .toggle( duration [, callback] ) .toggle( [duration] [, easing] [, callback] ) .toggle( [options] ) ※引数は show と同様表示・非表示の反転 fadeIn .fadeIn( duration [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeIn( [options] ) ※引数は show と同様フェードイン fadeOut ※書式は fadeIn と同様フェードアウト slideUp ※書式は fadeIn と同様スライドアップ slideDown ※書式は fadeIn と同様スライドダウン slideToggle ※書式は fadeIn と同様スライドアップ、またはダウン
これらのメソッドはちょっと引数がいろいろあって、複雑にみえますが先ずは duration について説明します。
duration はそのメソッドのアニメーションの時間を指定します。指定する引数は数値型と文字列型があります。
数値型はミリ秒の値の指定で、文字列型は "slow" "fast" の値を指定します。 （以下の様な感じです）//数値型 object.show(200); object.hide(400); //文字列型 object.show("slow"); //show(600)の場合と同様 object.hide("fast"); //hide(200)の場合と同様 object.hide(); //hide(400)の場合と同様（デフォルト値） //ここでの「object」はJQueryオブジェクト
それでは show, hide, toggle を使った例（メニューブロックの表示・非表示）を示します。<html> <head> <meta charset="utf-8"> <title>test show/hide/toggle</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function animateShow() { $("#menu").show(400); // 表示 } //非表示処理 function animateHide() { $("#menu").hide("slow"); // 非表示 } //表示・非表示の反転処理 function animateToggle() { $("#menu").toggle("fast"); // 表示・非表示 } </script> </head> <body> <h2>test show/hide/toggle</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateShow();">show</button> <button onclick="animateHide();">hide</button> <button onclick="animateToggle();">toggle</button> </body> </html>
上の例は、メニューの様なものを表示する div で囲まれた領域を表示・非表示の処理を行います。 表示する時には下方向にするすると下がってくる感じで表示され、隠す時には上方向にさっと上がる感じで消えていきます。
■easing の指定（変化速度）
easing はHTMLオブジェクトの変化の種別を指定します。 linear を指定すると直線的に変化し swing を指定すると最初ゆっくり動きだし最後の方は早く変化します。 尚、省略した場合は swing になります。
jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能な様です。<html> <head> <meta charset="utf-8"> <title>test show/hide easing</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncShowSwing() { $("#menu").show("slow", "swing"); // swing 表示 } function fncShowLinear() { $("#menu").show("slow", "linear"); // linear 表示 } //非表示処理 function fncHideSwing() { $("#menu").hide("slow", "swing"); // swing 非表示 } function fncHideLinear() { $("#menu").hide("slow", "linear"); // linear 非表示 } </script> </head> <body> <h2>test show/hide easing</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShowSwing();">show swing</button> <button onclick="fncHideSwing();">hide swing</button> <br /> <button onclick="fncShowLinear();">show linear</button> <button onclick="fncHideLinear();">hide linear</button> </body> </html>■easing の指定（変化速度）jQuery UI Effect プラグインを導入
jQuery UI Effect プラグインを導入した例を以下に示します。<html> <head> <meta charset="utf-8"> <title>test show/hide easing</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript"> //表示処理 function fncShowEaseInQuad() { $("#menu").show("slow", "easeInQuad"); // easeInQuad 表示 } function fncShowEaseInElastic() { $("#menu").show("slow", "easeInElastic"); // easeInElastic 表示 } //非表示処理 function fncHideEaseInOutQuad() { $("#menu").hide("slow", "easeInOutQuad"); // easeInOutQuad 非表示 } function fncHideEaseInCubic() { $("#menu").hide("slow", "easeInCubic"); // easeInCubic 非表示 } </script> </head> <body> <h2>test show/hide easing</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShowEaseInQuad();">show easeInQuad</button> <button onclick="fncHideEaseInOutQuad();">hide easeInOutQuad</button> <br /> <button onclick="fncShowEaseInElastic();">show easeInElastic</button> <button onclick="fncHideEaseInCubic();">hide easeInCubic</button> </body> </html>
easing として指定できるパラメータは以下のものがあります。 動作がどの様になるかは詳しく調べていませんが、後々調べたいと思います。linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInExpo easeOutExpo easeInOutExpo easeInSine easeOutSine easeInOutSine easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
■フェードイン・アウト処理（コールバック関数の例を含む）
フェードイン、フェードアウト処理の例を以下に示します。 フェードインとは徐々に表示が現れて完全に見える様になる処理であり、フェードアウトとは徐々に表示が薄れていき最後に完全に見えなくなる処理です。
フェードイン、フェードアウトには処理時間が長くないと実感できませんので fadeIn, fadeOut, fadeToggle メソッドの第一引数には「2000」（2秒）と指定します。
また fadeToggle メソッドにはコールバック関数の指定をしています。 コールバック関数はメソッドの処理が終わった時点で呼ばれます。 今回の関数は div 領域が表示・非表示の状態をアラートしています。
<html> <head> <meta charset="utf-8"> <title>test fadeIn/fadeOut/fadeToggle</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncFadeIn() { $("#menu").fadeIn(2000, "swing"); //2秒でフェードイン } //非表示処理 function fncFadeOut() { $("#menu").fadeOut(2000, "linear"); //2秒でフェードアウト } //表示・非表示反転処理 function fncFadeToggle() { $("#menu").fadeToggle(2000, "linear", fncCallback); } //fadeToggle 処理後に呼ばれる関数宣言 function fncCallback() { if ($("#menu").css("display") == "block") { alert("表示"); } else { alert("非表示"); } } </script> </head> <body> <h2>test fadeIn/fadeOut/fadeToggle</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncFadeIn();">fadeIn swing</button> <button onclick="fncFadeOut();">fadeOut linear</button> <button onclick="fncFadeToggle();">fadeToggle linear</button> </body> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
何秒後かに何かの処理を行いたい、もしくは一定時間毎に何かの処理をしたい場合に JavaScript では以下の関数を使います。関数 書式 説明 setTimeout id = setTimeout(func, timeval) id :タイムアウト処理の識別ID func :タイムアウト時に実行する関数 timeval:タイムアウト時間（ミリ秒）
タイムアウト時の関数設定を行う setInterval id = setInterval(func, timeval) id :タイマー処理の識別ID func :タイマー時間毎に実行する関数 timeval:タイマー時間（ミリ秒）
タイマー処理の関数設定を行う clearTimeout clearTimeout(id) id :タイムアウト処理の識別ID
タイムアウト処理を中止する
ここで指定される id は setTimeout で返されたものを指定clearInterval clearInterval(id) id :タイマー処理の識別ID
タイマー処理を中止する
ここで指定される id は setInterval で返されたものを指定
今回は、これらの関数を使って指定時間が過ぎた時に何かの処理を行うものと、 ある一定時間ごとに処理を繰り返すものの例を記したいと思います。
■このページの内容
- 指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）
- 指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例
- 一定時間ごとに処理を繰り返す簡単な例
- 一定時間ごとの処理を途中で止める簡単な例
■指定時間が過ぎた時に何かの処理を行う簡単な例（タイムアウト処理）
以下の例では「タイマー開始」 button タグのクリックイベントでタイムアウト処理を行う関数 StartTimeout を呼出しています。
StartTimeout ではタイムアウト関数である TimeoutProc を宣言してそれを setTimeout に渡すことで タイムアウト処理が開始されます。
setTimeout のタイムアウト時間はミリ秒での指定なので、10秒の場合は1000倍した10000を指定します。
「タイマー開始」をクリックするとボタンが押下不可になり、5秒後に「タイムアウト!」のメッセージが表示され、 「タイマー開始」が押下可能となります。<html> <head> <meta charset="utf-8"> <title>Timer - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 1</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> </body> <script type="text/javascript"> function StartTimeout() { //ボタン押下不可設定 $("#StartButton").attr("disabled", true); //タイムアウト関数宣言 var TimeoutProc = function() { alert("タイムアウト!"); //ボタン押下許可設定 $("#StartButton").attr("disabled", false); }; var timeoutVal = 5 * 1000; //5秒 //タイムアウトの設定 setTimeout(TimeoutProc, timeoutVal); } </script> </html>■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例
上記の例に「タイマー停止」ボタンを設置し「タイマー開始」で設定されたタイムアウト処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setTimeout でタイムアウト関数を設定しますが、 戻り値として返されるタイムアウトidを変数に退避します。
「タイマー停止」で呼ばれる StopTimeout ではタイムアウトidを clearTimeout に渡してタイムアウト処理を中止します。
<html> <head> <meta charset="utf-8"> <title>Timer - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 2</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); //タイムアウト関数宣言 var TimeoutProc = function() { alert("タイムアウト!"); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); }; var timeoutVal = 5 * 1000; //5秒 //タイムアウトの設定 id = setTimeout(TimeoutProc, timeoutVal); } //タイマー停止 function StopTimeout() { //タイムアウトの停止 clearTimeout(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>■一定時間ごとに処理を繰り返す簡単な例
一定時間ごとに繰り返す処理と言えば、時計の様に時刻を表示する処理があります。
これを実現するため「タイマー開始」ボタンを設置し、それをクリックすることで1秒毎に現在時刻を表示する例を示します。
以下の例では「タイマー開始」ボタンのクリックイベントでタイマー処理を行う関数 setInterval を呼出しています。 StartTimeout ではタイマー関数である TimeProc を宣言してそれを setInterval に渡すことで タイムアウト処理が開始されます。
このソースでは一旦「タイマー開始」ボタンのクリックすると止める手立てがありませんので、ずっと時刻表示が続きます。 （なおブラウザの再読込で最初の状態になりますが...）<html> <head> <meta charset="utf-8"> <title>Timer - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 3</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <br /><br /> 時刻：<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //ボタン押下不可設定 $("#StartButton").attr("disabled", true); //タイマー関数宣言 var TimeProc = function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }; var timeoutVal = 1 * 1000; //1秒 //タイマーの設定 id = setInterval(TimeProc, timeoutVal); } </script> </html>■一定時間ごとの処理を途中で止める簡単な例
上記の例ではタイマー処理を中断できなかったので「タイマー停止」ボタンを設置し、「タイマー開始」で設定されたタイマー処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setInterval でタイムアウト関数を設定しますが、 戻り値として返されるタイマーidを変数に退避します。
「タイマー停止」で呼ばれる StopTimeout ではタイマーidを clearInterval に渡してタイマー処理を中止します。
<html> <head> <meta charset="utf-8"> <title>Timer - 4</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 4</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> <br /><br /> 時刻：<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); //タイマー関数宣言 var TimeProc = function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }; var timeVal = 1 * 1000; //1秒 //タイマーの設定 id = setInterval(TimeProc, timeVal); } //タイマー停止 function StopTimeout() { //タイマーの停止 clearInterval(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>
ここまでは setInterval や setTimeout の引数としての関数を別の変数で宣言した後で、 それぞれの関数に渡していました。 その引数のところに無名関数として直接に宣言する方法もありますので、上のソースを変更してみます。<html> <head> <meta charset="utf-8"> <title>Timer - 4 - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 4 - 1</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> <br /><br /> 時刻：<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); var timeVal = 1 * 1000; //1秒 //タイマーの設定(関数宣言を共に) id = setInterval(function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }, timeVal); } //タイマー停止 function StopTimeout() { //タイマーの停止 clearInterval(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
以前以下の記事にてテーブルの行タグである <tr> にカスタム属性を付加することを行いました。
⇒JavaScript jQueryで table の操作する方法その４・データ行の追加と削除
今回は、別のタグにカスタム属性を追加する例を記したいと思います。
■このページの内容
■カスタム属性の付け方
以下の例では button タグに data-index と名前を付けたカスタム属性を付加しています。<button name="button1" type="button" data-index="1" >ボタン</button>
カスタム属性のタグ名は data- の後に任意で小文字の英数文字で指定します。 文字列の中にハイフンを入れても良いようです。
このカスタム属性を参照するには jquery では data() または attr() 関数を使います。 以下の様な感じです。var index1 = $("button[name=button1]").data("index"); //data()の場合は"data-"を省略 var index2 = $("button[name=button1]").attr("data-index");■カスタム属性の簡単な例
以下の例は button を2個設置し、最初の button にカスタム属性「data-index」を設定します。 さらに、2番目の button のクリックイベントで最初の button のカスタム属性を取得し、表示しています。
<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 1</h2> <button name="button1" type="button" data-index="10" >ボタン1</button> <button name="button2" type="button" onclick="getCustomTag();false;" >ボタン2</button> </body> <script type="text/javascript"> function getCustomTag() { //[button1]の[data-index]の取得 var index1 = $("button[name=button1]").attr("data-index"); var index2 = $("button[name=button1]").data("index"); //表示(同じ値が表示される) alert("data-index:" + index1 + " , " + index2); } </script> </html>■複数の button タグのクリックイベントでのカスタム属性の取得の例
以下の例では button を4個設置し、各ボタンのイベント処理で、自分自身のカスタム属性の値を取得する例を示します。<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 2</h2> <button name="button-attr" type="button" data-index="1" >ボタン1</button> <button name="button-attr" type="button" data-index="2" >ボタン2</button> <button name="button-attr" type="button" data-index="3" >ボタン3</button> <button name="button-attr" type="button" data-index="4" >ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); alert("data-index:" + index); return false; }); }); </script> </html>
■1個のタグに複数のカスタム属性を宣言した例
以下では1個の button タグの中に複数のカスタム属性を宣言した例を示します。
実際問題として、1個のタグに各種の情報を持ちたい場合は想定されるので、やってみました。
「data-d1」「data-d2」としたカスタム属性を宣言しています。 各ボタンをクリックした時に3個のカスタム属性を取得し表示しています。
<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 3</h2> <button name="button-attr" type="button" data-index="1" data-d1="001" data-d2="101">ボタン1</button> <button name="button-attr" type="button" data-index="2" data-d1="002" data-d2="102">ボタン2</button> <button name="button-attr" type="button" data-index="3" data-d1="003" data-d2="103">ボタン3</button> <button name="button-attr" type="button" data-index="4" data-d1="004" data-d2="104">ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); var d1 = $(this).attr("data-d1"); var d2 = $(this).attr("data-d2"); alert("data-index:" + index + " data-d1:" + d1 + " data-d2:" + d2); return false; }); }); </script> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方（セレクタ）
⇒JavaScript jQueryの使い方（セレクタ）その２
⇒JavaScript jQueryの使い方（セレクタ）その３・セレクタの存在確認
⇒JavaScript jQueryの使い方（セレクタ）その４・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
文字列の分割を行う関数の説明は以下の記事で行いましたが、今回は少し気になった件に付いて記します。
⇒PHP 標準関数その1・文字列の分割・結合を行う関数（explode, implode）について
■一般的なexplode関数の使い方
先ずは explode 関数の一般的な使い方ですが、以下の様なソースを作成します。
<?php /* f1-explode.php */ // 分割する文字列 $str = "東京,名古屋,京都,大阪"; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>これをブラウザで実行すると以下の表示になります。
array(4) { [0]=> string(6) "東京" [1]=> string(9) "名古屋" [2]=> string(6) "京都" [3]=> string(6) "大阪" }変数「$arr」に指標「0」から順にカンマで分割された文字列が設定されています。
これ自体は特に問題は無いのですが explode 関数に渡す文字列が null または 空文字列(長さが 0 の文字列) の場合は どうなるのでしょうか。
■nullをexplode関数で分解処理
それでは早速やってみます。上記のソースの文字列を null に変えます。
<?php $str = null; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>これをWindowsコマンドプロンプトで実行すると以下の表示になります。
array(1) { [0]=> string(0) "" }KEYが「0」で内容が空文字列の要素が「1件」の配列が返されます。
なお null の部分を空文字列に変更しても同様の結果となります。<?php $str = ""; // 分割処理 $arr = explode(",", $str); // 配列の内容表示 echo "<pre>"; var_dump($arr); echo "</pre>"; ?>この結果から文字列に何かのデータが設定されていて、それを分解して使う場合、 null または 空文字列 だと1件の文字列が在ることになってしまいます。
もし、それでもいいのならば問題にはならないのですが、 不都合であれば、分解処理の前に対象文字列を null または 空文字列 の判定を行って 別処理を行う必要があります。
