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

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

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

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

新しいjsを追加すると既存のものが機能しなくなります。

h-o
h-o

総合スコア134

Magento

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

0クリップ

1900閲覧

投稿2017/05/31 05:00

編集2017/05/31 08:00

###問題の詳細
新js(指定した期間で画像の表示非表示を切り替える)を追加すると、既存js(メインビジュアルのスライダー)の次の画像に切り変える機能(手動、自動共に)が動かなくなります。
まず、既存のスライダーがなぜ動かなくなったかを調べるにはどうすればよいでしょうか?

ちなみに、新js>既存jsの順番で<head>の一番最後に読み込んでいます。

問題のページ

※リンク先のページでconsoleエラーがいくつかありますが、既存jsが問題なく動いていたときからあるものなので今回の問題に関係する可能性は低いと思われます。


原因の可能性がある箇所
以下の画像はスライダーの一枚目に新jsを設定し現在は非表示になるようにしたものなのですが、画像は非表示中でもページャーでは1枚としてカウントされています。(画像の赤丸部分、本来は点が4つなるはず)これにより、スライダー数のカウントがおかしくなり動かない原因になっているのではと思われます。
イメージ説明


新jsの関連コードについて
以下のコードと

<script> jQuery(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>

指定した期間で表示非表示を切り替える部分に以下のコードを追加することで機能します。

class="view_timer" data-start-date="2017/5/26 09:50" data-end-date="2017/5/26 09:59"

既存のjsの関連コード

<script src="https://wonect.com/skin/frontend/rwd-child/default/js/jquery.bxslider.min.js"></script>
<script> jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider({ auto: true, pause: 9000, /*停止時間*/ speed: 2000 }); }); </script>

以上、お手数ですが助言をいただければと幸いです。

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

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

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

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

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

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

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

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

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

m.ts10806

2017/05/31 05:59

Chromeのデベロッパーツールで見ると結構いろんなエラー出ているように見受けられますが、ひとまず一通りエラーを解消してからの方がいいかもしれません・・・。 何が干渉しあっているのかが分かりづらくなりますし、何ができて、何ができていないのかも見えづらくなります。
h-o

2017/05/31 06:40

質問への追記・修正の依頼ありがとうございます。全ては難しそうですができそうなものから対処してみます。

回答1

1

ベストアンサー

現状のコードからの推測ですが前提として、
jQuery(document).ready(function()jQuery(function($)は同じです。

参考URL:【jQuery】処理実行タイミング $(document).readyと$(window).load

新コードを先に書いていて順番に上から順番に流れているようですが、同じ意味で同じタイミングで動作するので先に書いたからといって先に処理が終わるとは限りません。
新コードで非表示にしたい情報を探りきる前に旧コードが動作するとスライダーは出来上がってしまうわけですし。
確実に旧コードを後に走らせたいのであれば、新コードの中で最後に入れると良いでしょう。
それでダメなら「新コードが終わるのを待って」という対応をしてみてください。
when()~done()というのがあります。参考:【jQuery】処理が終わってから次の処理を実行する

あと、hide()ではなくremove()も試してみてください。hide()display:hiddenにして画面上見えなくするだけなのでremove()で物理的に削除した方がいいかもしれません。
※何かのイベントで再表示する必要があるのならremove()では対応しきれませんが。

投稿2017/05/31 08:13

m.ts10806

総合スコア79997

raichi👍を押しています

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

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

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

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

回答へのコメント

h-o

2017/05/31 09:07

詳しい回答をいただき誠にありがとうございます。いつもお世話になっております。 remove()を使う方法でうまくいくようですが、もう少し検証してから返信いたします。
h-o

2017/06/01 02:12

「新コードの中で最後に入れる」、「when()~done()」でうまくいかず、「hide()ではなくremove()」を使うことでうまく指定期間だけ表示し、スライダーも問題なく動くようになりました。 ありがとうございました。
m.ts10806

2017/06/01 02:15

物理的に削除しておかないと拾ってくる感じですね。 解決したようで良かったです。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Magento

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。