- ベストアンサー
【jQuery】西暦を指定せずに動かす方法
以下のサイトを参考にして、HTMLのテキスト表示を期間ごとに違う内容を表示するようにしたいと思っています。 ※ 日時指定で要素の表示と非表示を切り替えるjQuery（http://ur0.work/wBe4） ＜例＞ 変更前）こんばんは⇒変更後）おはようございます！ 変更前）夏になりました⇒変更後）冬になりました しかし、このjQueryは西暦を指定しなければなりません。 西暦を入力しなくても動くように、変更したいのですがどうすればよいでしょうか？ 僕の能力では半日かかっても分かりませんでしたので、是非教えて頂きたく存じます！ 何卒宜しくお願い致します！
- myktk
- お礼率52% (338/648)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
とりあえずこんな感じで。 ━━ HTMLの記述例 ━━━━━━ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TEST</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <div class="main"> <p class="my-view-timer" data-view-timer="4/3-4/25">記念セール1</p> <p class="my-view-timer" data-view-timer="4/3-4/25">記念セール2</p> <p class="my-view-timer" data-view-timer="4/3-4/25">記念セール3</p> </div> <script src="//example.com/my-script.js"></script> </body> </html> ━━ "my-script.js" の記述例 ━━━━━━ (function($){ my_func_viewtimer('.my-view-timer','data-view-timer'); })(jQuery); function my_func_viewtimer(tags,vtimer){ var vt = $(tags), cnt = vt.length; if ( 0 < cnt ) { vt.hide(); /* CSSで事前に隠してる場合は必要無し. */ var tt = new Date(), yy = tt.getFullYear(), tt = tt.getTime(), dt, n, mt1, mt2, my_reg = /^(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])-(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])$/; for ( var i=0; i<cnt; i++ ) { dt = $(vt[i]).attr(vtimer); if ( dt && my_reg.test(dt) ) { dt = dt.split('-'), mt1 = new Date( yy+'/'+dt[0] ), mt2 = new Date( yy+'/'+dt[1] ), mt1 = mt1.getTime(), mt2 = mt2.getTime(); if ( mt1 < tt && tt < mt2 ) { $(vt[i]).show(); } } } } } P.S. webページ内のタグに class="my-view-timer" と data-view-timer="X/X-Y/Y" が揃って初めて起動し表示されます。常に表示を基本とするか、非表示を基本とするかは大元のCSSでまとめて display:none; を指定して制御した方が良いと思います。 ＞jQueryをHEAD内に記載 大本の "jquery.min.js" を<head>内部で読み込むのはOKですが。実際に実行されるコードを<head>内等に記述する事は非推奨…というか実行用のJavascriptコードは、全てのDOM(HTMLタグ)が読み込まれた後の最後の最後で読込み実行される様にするべきです(基本的には</body>の直前)。 何故かというプログラムの基本中の基本、つまりJavascriptにしろHTMLにしろ全てのコード(コンピュータの処理)は「記述された順番でしか読込まれず実行もされない」からです。これはノイマン型コンピュータの不変の法則なので変更不可！従って何らかのプログラムを記述し実行させたい場合はこの法則を絶対遵守しなければならず、それを外れたコードは正常実行を約束出来ず様々な予期せぬ不具合の原因となります。 大本の "jquery.min.js" はライブラリと呼ばれる種類のプログラムであり、それ自体には具体的な処理を実行する機能はありません。なので<head>内部等で早めに読み込んで置き、これ以降に記述され実行されるであろうJSコードのために準備し備える必要があるため、むしろwebページ内の早い段階で読み込んで置く事が推奨されます(一般的には<head>内部)。 ところが実際に様々な具体的な処理を行うJSコード、この場合は「CLASS名と日付データによって表示/非表示を切り替える処理」を<head>内部で読み込んでしまった場合。プログラムは常に前述の通り、読み込まれた順番、記述された順番に即座に実行され結果を返して処理を停止し次へ進みます。この時にコードが<head>内部で読み込まれ実行された場合、実行されたコードは記述された処理に従い class="my-view-timer" を探しますが、まだページ本体の<body>以降の部分が読み込まれてないため当然ながらCLASSは見つからず「該当CLASS名無し、よって処理の必要なし！」となってプログラムは処理を完結し何も起きずに終わります。 従って具体的な処理を行うJSコードは必ずwebページの全てのHTMLタグ要素が読み込まれた後、つまり最後の最後の</body>の直前にまとめて記述、或いは読み込ませる様に記述するべきであり、またそうしなければ期待通りの処理が行われません。無論、世の中にはこの基本を無視して<head>内部に実行用JSコードを記述した解説記事等がありますが、これはたまたま上手く行ってるに過ぎず敢えて<head>内部にコードを記述するメリットは完全にゼロ、百害あって一利無しです。 以上！苦情は受け付けない(笑)。
その他の回答 (3)
- 4017B
- ベストアンサー率73% (1306/1777)
ちょっと修正。よくよく考えたら2桁表記に固定する意味無かったので、こっちの方が汎用性が若干高まると思います。後、せっかくjQuery使ってるのでCSS書き換えじゃ無くて、汎用的な hide()～show() で表示/非表示の切り替えをする様に変更。他に何かコードを走らせる場合は、(function($){...})(jQuery); の内部に適当な箇所に追記してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TEST</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <p id="my-view-timer" data-view-timer="4/1-04/15">OKWave開催中！！</p> <script> (function($){ if ( document.getElementById('my-view-timer') ) { var vt = $('#my-view-timer'), dt = vt.attr('data-view-timer'), tt = new Date(), yy = tt.getFullYear(), tt = tt.getTime(), my_reg = /^(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])-(?:0?[1-9]|1[0-2])\/(?:0?[1-9]|[1-2][0-9]|3[0-1])$/; vt.hide(); if ( my_reg.test(dt) ) { var dt = dt.split('-'), mt1 = new Date( yy+'/'+dt[0] ), mt2 = new Date( yy+'/'+dt[1] ), mt1 = mt1.getTime(), mt2 = mt2.getTime(); if ( mt1 < tt && tt < mt2 ) { vt.show(); } } } })(jQuery); </script> </body> </html>
- 4017B
- ベストアンサー率73% (1306/1777)
とりあえずこんな感じで。CLASS指定だと複数個の時を考慮しないといけなくなるので、JSでHTML内のDOMを弄る時の基本はID指定で。 後、「4月1日」みたいな漢字(マルチバイト文字)が交じるとややこしくなるだけ百害あって一利無しなので、こういう場合は全て事前にオール半角英数文字のみで入力指定する事！この作例では「04/01-04/15」のフォーマットのみ受け付ける様にして、それ以外は一切排除する仕様です(1桁月日も0を付けて2桁表記にする)。 一応、「13/33」みたいな有り得ない日付は弾く様にしてあります。とりあえず試してみて、何か不具合とか疑問があったらまた再質問してください。 あ、console.log() は単なるエラーチェック用なので実際の運用時には削除して構いません。 ━ 記述例 ━━━ <p id="my-view-timer" data-view-timer="04/01-04/15">OKWave開催中！！</p> (function($){ if ( document.getElementById('my-view-timer') ) { var vt = $('#my-view-timer'), dt = vt.attr('data-view-timer'), tt = new Date(), yy = tt.getFullYear(), tt = tt.getTime(), my_reg = /^(?:0[1-9]|1[0-2])\/(?:0[1-9]|[1-2][0-9]|3[0-1])-(?:0[1-9]|1[0-2])\/(?:0[1-9]|[1-2][0-9]|3[0-1])$/; if ( my_reg.test(dt) ) { var dt = dt.split('-'), mt1 = new Date( yy+'/'+dt[0] ), mt2 = new Date( yy+'/'+dt[1] ), mt1 = mt1.getTime(), mt2 = mt2.getTime(); if ( mt1 < tt && tt < mt2 ) { vt.css({'display':'block'}); } else { vt.css({'display':'none'}); } } else { console.log( tt,'timer is wrong!' ); } } else { console.log( tt,'timer is not found...' ); } })(jQuery);
- 4017B
- ベストアンサー率73% (1306/1777)
具体的にはどういった記述式で行いたいのですか？結局、Javascriptも含めて全てのプログラム言語は時間を内部的には西暦年(秒数)で処理しますので、一般利用者などにフォーム等から生年月日の入力を求める場合を除けば、最初から全ての時間は西暦年記述で行って置く方が合理的で後々の不具合も未然に防ぐ事が出来ます。 まあそれはさて置き、下記参考サイトで紹介されているライブラリを導入すれば簡単に和暦を西暦換算してくれます。今、話題の「令和」にも対応済みですので今後も当分は使えると思います。 - 和暦から西暦へ変換 https://co.bsnws.net/article/335 P.S. 質問者が提示している参考サイトのコードも外部入力では無く、webサイトの管理者自身が直にwebページ内のHTMLコードとして年月日を直に記述する手法になっていますので、西暦年式以外での記述をわざわざ行うのは二度手間三度手間になるだけで百害あって一利無しな様な気がしますが…？
補足
ご回答いただき有難うございます！ 説明不足でした。 ＜例＞ 4月1日～4月30日：春ですね。 5月1日～5月31日：GWですね。 例えばですが、上記のように毎年同じ時期に同じ表示を出したいと考えています。もし今年の西暦を入力してしまうと、翌年は同じ挙動が出来ないと思います。 ですので、毎年同じ挙動になる記述方法が知りたく、質問させていただきました！ お分かりでしたら、是非ともご教授頂けますと幸いです。 何卒宜しくお願い致します！
関連するQ&A
- jQueryでheightが指定されていないエレメントを得る方法
jQueryでheightが指定されていないエレメントを得る方法 javascirptとjQueryを使ってサイトのデザインを変更しようとしています。 その中で「スタイルシートでheigihtが指定されていない」要素を 対象外にするために取り出そうとしていますが、うまくいきません。 $("*").css("height") 又は$("*").height() は、実態の高さを返します。 それが本来的な使い方で、希望しているものが例外的とは理解しています。 何らかの方法が無いかと悩んでいます。 何か方法まはたヒントがございましたら、ご教授ください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jquery
jquery でレスポンシブなメニューを勉強しています。 下記のURLを参考に作ってみたのですが、この場合のjqueryって（HTML要素の）表示の切り替えをしているのですよね？ 簡単ではないでしょうが手作業で ライブラリ を使わずできますか？ またどのようにすればよいでしょうか？ https://rico-notes.com/programming/html/header-responsive/
- ベストアンサー
- JavaScript
- jQuery スライダー
下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。 参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか？ 自分のソースを書くスペースが無いので、申し訳ありませんが、私が参考にしたサイトのURLよりソースをご確認頂き、ご指摘お願いいたします。 参考サイト http://black-flag.net/jquery/20121219-4407.html
- 締切済み
- JavaScript
- jQueryでリスト項目の表示・非表示を切りかえる
jQueryに詳しい方教えてください。 下記のようなHTMLがあって、 jQueryを使って<li>要素の表示／非表示を切り替えたいのです。 ---------------- HTMLスクリプト <ul class="test"> <li>項目1</li> <li>項目1</li> <li>項目1</li> </ul> 切り替えるタイミングはxmlのデータ内にflagを立てています。 flagの値は取得できました。（確認済み） 仕様としては、flagの値が 0の時は→<li>要素の1つ目と2つ目を表示させる。 1の時は→<li>要素の3つ目のみを表示させる。 2の時は→<li>要素のすべてを表示させる。 ということをしたいのです。 ですが、なぜかうまくいきません。 以下のように書きました。 if(flag==0){ $(".test li:eq(2)").hide(); }else if(settlementflag==1){ $(".test li:eq(0)"), .test li:eq(1)").hide(); }else if(settlementflag==2){ //何もしない }; そもそもこうゆう書き方で合っているのしょうか？ jQueryを勉強したてで、恥ずかしいばかりですが、 ご教授のほど宜しくお願いいたします。
- ベストアンサー
- AJAX
- Jqueryでコンテンツスライダーを設置する
下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 参考サイトには「今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけない」となっており、 参考サイトにあるjqueryのソースを幅1000px（コンテンツスライダー要素全体を囲うブロック要素）のコンテナー内の中央に幅950pxで表示させることは可能でしょうか？ どこを変更すれば、いいのか教えて下さい。 参考サイト http://black-flag.net/jquery/20121219-4407.html
- 締切済み
- JavaScript
- jQuery｜:not(:animated)
こんにちは、 jQueryにおいて、要素に対して.hoverをかけ、:not(:animated)の指定をした場合、対象要素上で素早くマウスを滑らせると、アニメーションが終了する前にmouseleaveしてしまい、mouseenterの状態でアニメーションが止まってしまいます。(下記URL参照) http://ref.andwax.com/Untitled-1.html このように棚に並べたパンすべてに同様の処理を行う予定なのですが、前述の不具合が解消できなければアイディアそのものを変更を迫られることになると思われます。何か対処方法をご存じでしたら、お伺いできませんでしょうか。全く違う方法で同様の処理を行うアイディアをご存じでしたら、そちらもお聞かせいただけるとありがたいです。 また、area要素にはcursorプロパティが効かないようなのですが、カーソルを出現させるためのアイディアがありましたら、伺わせてください。
- ベストアンサー
- JavaScript
- jQueryで指定された要素のIDに触れた時イベントを起こしたいのです
jQueryで指定された要素のIDに触れた時イベントを起こしたいのですがうまくいかずに困っています。 jQuery(document).ready(function($) { var msg = ""; $("#Div11").mouseover(function() { msg = "おはよ" alert(msg); }); $("#Div2").mouseover(function() { msg = "こんにちは" alert(msg); }); $("#Div3").mouseover(function() { msg = "うっすー" alert(msg); }); $("#Div4").mouseover(function() { msg = "お疲れ様でした" alert(msg); }); $("#Div5").mouseover(function() { msg = "こんばんは" alert(msg); }); }); このような記述をしているのですがIDに触れた時、値を代入してメッセージを表示させたいのですが出来ません。 どなたかご教示願います！
- ベストアンサー
- JavaScript
- Jquery.ajaxでHTML読み込み
現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか？ 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。
- 締切済み
- JavaScript
- jQuery height()；で高さ取得できない
jQuery初心者です。 宜しくお願いします。 要素の高さを取得するべく $(セレクタ).height(); としております。 取得したい要素ですが cssでのheightは特に固定値ではなくauto設定です。 (コンテンツの量によって可変させるため) これで、$(セレクタ).height(); を使い要素の高さを取得しましたが、 alertで表示させると0となってしまいます。 最終目標は要素の高さ(複数あり横並びで配置)を取得して、 配列におさめ、最高値をわりだして、 横並びの要素の高さを揃えたいと思っています。 その前に… 各要素の高さが取得できないんです。 何が問題なのかをお分かりになる方、 どうぞご教授下さい 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- JQueryでLoadで読み込んだHTMLに対し、$().widthで
JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定などの操作ができずに困っています（TT 色々調べたのですが、情報が出てこなかったので質問させてください。 ---------------------------------------------------------- $("#loaddiv").load("http://hoge.com/hoge.html"); //ここでLOAD $("div#base").ready(function() { //hoge.html内の#baseが準備できたら。 baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。（＊１） txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素 $(baseC).width(300); //#baseを幅300へ変更。 $(txtLine).width(300); //#textlineを幅300へ変更。 } ----------------------------------------------------------- なぜか（＊１）の部分に、FireBugでブレークポイントを設定すると上手くいきます。 おそらく、#baseや#textlineを含んだHTMLファイルを、 Loadで読み込む前に、変数へ代入するからと想像しますが、 Load内の全要素読取終了後イベント（それに近い方法）か、 Loadで読み込んだ後の要素を上手く操作する方法をご存じの方、 この状況を打開する方法をご存じの方、どうか助けてください（TT
- ベストアンサー
- JavaScript
補足
補足コメントを入力したのですが、最後まで完了していなかったようで連絡が遅くなってしまいました。 ご回答いただきまして有難うございます！ 何度も申し訳ございません。 できれば複数個所で使用したく存じます。 ＜例＞ (1)はじめの挨拶 (2)TOP画像の変更 (3)おわりの挨拶 複数回しようすることが出来て、出来ればjQueryを「head内に記載」または「外部読み込み」で起動できるように変更は可能でしょうか？ ご教示頂けますと幸いです！ 何卒宜しくお願い致します！