質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Magento

Magentoはオープンソースでも業務用のライセンスでも取得することができるZend Frameworkベースで作られたeコマースのプラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

日時指定で表示・非表示を切り替えるスクリプトが機能しません。

h-o
h-o

総合スコア134

Magento

Magentoはオープンソースでも業務用のライセンスでも取得することができるZend Frameworkベースで作られたeコマースのプラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

0クリップ

3072閲覧

投稿2017/05/08 02:50

###実現したいこと
以下の日時指定で表示・非表示を切り替えるスクリプトを機能させること

###試したこと
以下の参考記事をもとに、日時指定で表示・非表示を切り替えるスクリプトを使うために以下のコードをbody内の一番上に追加しました。

<script> $(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); }); </script>

(参考記事:ブラウザ側で日時指定で表示・非表示を切り替えるスクリプト)

jsの読み込み箇所をbodyの直後から一番最後にしてみましたがだめでした。

###発生している問題・エラーメッセージ
以下のページで問題が発生しており、
(問題が発生しているページ)

エラーメッセージは以下の通りで、

Uncaught TypeError: $(...).ready is not a function at (index):450

エラーの該当箇所は以下のとおりです。(jsの一部)

$(document).ready(function() {

###補足情報(言語/FW/ツール等のバージョンなど)
読み込んでいるjqueryライブラリは jquery-1.10.2.min.js です。

他に不明点などありましたら追記いたします。
よろしくお願いします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

2

ベストアンサー

どうやら、途中でjQuery.noConflict()が実行されているので、$がjQuery以外のものに置き換わっているようです。

$(document).ready(function(){jQuery(function($){に置き換えることで、

  • 外側はjQueryという名前でjQueryを拾う
  • 引数にセットした$で、関数内ではjQueryをこの名前で使える

ようになります。

投稿2017/05/08 03:00

maisumakun

総合スコア141535

kei344, umyu👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

h-o

2017/05/08 06:48

回答をいただき誠にありがとうございます。 jQuery(function($){ に置き換えて上記jsは機能するようになりましたが、スライダーのページ送りが機能しなくなりました。エラーには特に表示はありません。おそらく以下のコードと競合が起きているのではと思いますが、どう修正すればよいでしょうか? <script> jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider({ auto: true, /*mode: 'fade',表示モード*/ pause: 9000, /*停止時間*/ speed: 2000 /*pager: false, controls: false, touchEnabled: false*/ }); }); </script>

0

prototype.js を現役で使っている人を久しぶりに見ました。
jQuery.noConflict(); が実行されているので、
jQuery(document).ready(function(){ と書く必要があります。

また、同ページに複数のjQueryを読み込む必要はありません。

HTML

1<script type="text/javascript" src="http://wonect.com/js/lib/jquery/jquery-1.10.2.min.js"></script> 2<script type="text/javascript" src="http://wonect.com/js/iwd/all/iwd-jquery-2.1.3.min.js"></script> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

投稿2017/05/08 02:57

kei344

総合スコア69031

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

h-o

2017/05/08 06:31

回答をいただき誠にありがとうございます。 prototype.jsはデフォルトで読み込む設定になっているものでそのまま使っています。 jQuery(document).ready(function(){ に書き換えてみましたが機能しませんでした。
kei344

2017/05/08 06:35

maisumakunさんの書かれた jQuery(function($){ はどうでしょう。
kei344

2017/05/08 06:45

こちらで確認したところ正常に動作しているように見えます。 console.log( startDate, nowDate, endDate, (startDate <= nowDate),(nowDate <= endDate) ); Date 2017-05-08T06:00:00.000Z Date 2017-05-08T06:41:18.655Z Date 2017-05-08T06:05:00.000Z true false
h-o

2017/05/08 06:51

返信ありがとうございます。 >maisumakunさんの書かれた jQuery(function($){ はどうでしょう jQuery(function($){ に置き換えたところ機能しました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Magento

Magentoはオープンソースでも業務用のライセンスでも取得することができるZend Frameworkベースで作られたeコマースのプラットフォームです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。