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

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のコードを追加したら既存の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クリップ

354閲覧

投稿2017/05/10 01:27

編集2017/05/17 08:01

詳細

指定時刻にHTMLを変更するjs(A)を追加したら既存のメインビジュアルのスライダー(B)のページを送りが機能しなくなり、これを直したいです。

問題が発生しているページのリンク http://wonect.com/lab/

エラーメッセージ

イメージ説明

該当のコード

追加したjsのコード(A)

<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>

これに加え、自動的に表示非表示を切り替えたい部分を

<span class="view_timer" data-start-date="2017/5/17 15:00" data-end-date="2017/5/17 15:10"></span>

で囲うことで動作します。

既存のスライダーのjQuery(B)

<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>

https://wonect.com/skin/frontend/rwd-child/default/js/jquery.bxslider.min.js にあるjsで動作しているようです。

試してみたこと

jsの読み込み順を変更、spanにつけていた class=〜をliにつけてみましたが上手くいきませんでした。

以上、何卒ご教授いただけますでしょうか。。

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

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

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

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

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

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

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

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

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

namimon

2017/05/10 05:43

noConflictを使っているということは、prototype.jsを使っていたのですか?該当のコードを追加するまでは、$の衝突は問題なく処理できていたのでしょうか。
h-o

2017/05/10 06:22

追記依頼ありがとうございます。 私の確認では該当のコードを追加するまでは、$の衝突は問題なく処理できてたと認識しています。
t_obara

2017/05/10 07:51

ブラウザの開発ツールなどを利用して、エラーなどが出ていないことは確認済みなのでしょうか?最小限のコードで試してみてエラーがない状態にしてみてはいかがでしょうか。
h-o

2017/05/10 08:03

Chromeのデベロッパーツールのconsoleで確認しましたがjsに関係するエラーは確認できませんでした。
t_obara

2017/05/10 08:27

問題が発生しているページのリンクをみると、エラーが多く出ているので、もう少し問題調査を楽にするために、最小限のコードでとのことなのですが。

回答1

1

ベストアンサー

bxslider クラスを持つ<ul>内の

html

1<!-- before --> 2<span class="view_timer" data-start-date="2017/5/8 15:00" data-end-date="2017/5/8 15:05" style="float: left; list-style: outside none none; position: relative; width: 1386px; display: none;"> 3<li> 4<picture> 5 <source media="(max-width:780px)" srcset="https://wonect.com/media/wysiwyg/top/Main/SP/EN/20170503_Golden_Week_Special_SP.jpg"> 6 <img src="20170503_golden_week_special.jpg" alt="Golden Week Special"> 7</picture> 8</li> 9</span>

ここから、<span>タグを取ってください

html

1<!-- after --> 2<li> 3<picture> 4 <source media="(max-width:780px)" srcset="https://wonect.com/media/wysiwyg/top/Main/SP/EN/20170503_Golden_Week_Special_SP.jpg"> 5 <img src="20170503_golden_week_special.jpg" alt="Golden Week Special"> 6</picture> 7</li>

なお、google analyticsが動いていなかったり、jqueryファイルを複数読み込んでいたり、conflict避けを使っていなかったり?と、つぎはぎで処理をしている感じがうかがえます。
一度、リファクタリングをすることを強くお勧めします。

投稿2017/05/10 08:02

namimon

総合スコア726

kei344👍を押しています

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

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

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

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

回答へのコメント

h-o

2017/05/10 09:16

回答をいただき誠にありがとうございます。 ><span>タグを取ってください 指摘の<span>タグについて恐縮ですが、これは指定時刻にHTMLを変更するjsを機能されるのに必要なもののため、こちらを機能させつつ元のようにスライダーも機能させる方法をご教授いただけると幸いです。 >つぎはぎで処理をしている感じがうかがえます。 おっしゃるとおりで改善の必要があるのですが勉強不足なため対応できていない次第です。Analyticsについてはリンク先は簡易の検証環境のためデータを取得しないようにしています。
namimon

2017/05/10 23:27

spanをクラスで操作しているのであれば、liにそのクラスを当ててはどうでしょうか
h-o

2017/05/17 07:33

>spanをクラスで操作しているのであれば、liにそのクラスを当ててはどうでしょうか やってみましたが、うまく機能しませんでした。
namimon

2017/05/17 07:59

どのようにやったのか、コードを書いてみてください。
h-o

2017/05/17 08:03

<span class="view_timer" data-start-date="2017/5/17 15:00" data-end-date="2017/5/17 15:10"> <li>〜 の部分を <li class="view_timer" data-start-date="2017/5/17 15:00" data-end-date="2017/5/17 15:10"> 〜 に変えて試してみました。 よろしくお願いします。
namimon

2017/05/17 08:21

度々すみません。 うまく機能しなかったというのは、非表示がうまくいかなかったのか、スライダーがうまく動作しなかったのか教えていただけますか。 なお、内容が表題と離れてきています(そもそもの原因がjsを追加したことではなく、spanタグで囲ったことであったのは、確認いただけましたか?)。 新しくクラスで管理したいのでしたら、別の質問にしたほうがいいかもしれません。
h-o

2017/05/18 03:04

いえいえ、説明不足で申し訳ありません。 >うまく機能しなかったというのは、非表示がうまくいかなかったのか、スライダーがうまく動作しなかったのか教えていただけますか。 スライダーがうまく動作しませんでした。(手動、自動スライド共に機能しない状態) 表示非表示は問題なく動作しました。 そもそもの原因がjsを追加したことではなく、spanタグで囲ったことであったのは、確認いただけましたか? 確かにspanタグを削除するとスライダーは機能しますが、指定時刻にHTMLを変更するjsの動作に必要なspanタグ内のclassも消さないと機能しないため、目的が達成できません。 >新しくクラスで管理したいのでしたら、別の質問にしたほうがいいかもしれません。 私の理解不足かとは思うのですが、質問の趣旨が違ってきたから別の質問にすべきということでしょうか?
namimon

2017/05/18 04:48

ご返答ありがとうございます。 spanタグを取って、スライダーのliにclassをあてたら、動作しなくなったということでしょうか。 追加したjsのコード(A)の処理の後ろに、bxsliderのjQuery(B)を移動してみてください。 hide()で隠す → そのあとbxsliderを起動 >確かにspanタグを削除するとスライダーは機能しますが、指定時刻にHTMLを変更するjsの動作に必要なspanタグ内のclassも消さないと機能しないため、目的が達成できません。 >私の理解不足かとは思うのですが、質問の趣旨が違ってきたから別の質問にすべきということでしょうか? その通りです。原因がわからないうちはやむを得ない部分があるかと思いますが、表題と違う議題は、後々検索できた人に有用でないと思います。
h-o

2017/05/18 07:12

> spanタグを取って、スライダーのliにclassをあてたら、動作しなくなったということでしょうか そのとおりです。 > 追加したjsのコード(A)の処理の後ろに、bxsliderのjQuery(B)を移動してみてください。 教えていただいた方法でうまくいきました。コードAをbodyタグ内最上部、コードBをその最下部に追加しました。 > 表題と違う議題は、後々検索できた人に有用でないと思います。 注意して質問させていただきます。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

Magento

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

JavaScript

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

jQuery

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