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

Question

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

###試したこと
以下の参考記事をもとに、日時指定で表示・非表示を切り替えるスクリプトを使うために以下のコードを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 です。

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

Answer 1

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

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

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

ようになります。

Comments

[h-o]

回答をいただき誠にありがとうございます。

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>

Answer 2

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

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

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

Comments

[h-o]

回答をいただき誠にありがとうございます。

prototype.jsはデフォルトで読み込む設定になっているものでそのまま使っています。
jQuery(document).ready(function(){ に書き換えてみましたが機能しませんでした。

[kei344]

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

[kei344]

こちらで確認したところ正常に動作しているように見えます。
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]

返信ありがとうございます。

＞maisumakunさんの書かれた jQuery(function($){ はどうでしょう
jQuery(function($){ に置き換えたところ機能しました。