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

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

ただいまの
回答率

90.12%

jsのコードを追加したら既存のjsが機能しなくなりました。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 779

h-o

score 132

詳細

指定時刻に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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • t_obara

    2017/05/10 16:51

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

    キャンセル

  • h-o

    2017/05/10 17:03

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

    キャンセル

  • t_obara

    2017/05/10 17:27

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

    キャンセル

回答 1

checkベストアンサー

+1

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

<!-- before -->
<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;">
<li>
<picture>
  <source media="(max-width:780px)" srcset="https://wonect.com/media/wysiwyg/top/Main/SP/EN/20170503_Golden_Week_Special_SP.jpg">
  <img src="20170503_golden_week_special.jpg" alt="Golden Week Special">
</picture>
</li>
</span>


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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/18 12:04

    いえいえ、説明不足で申し訳ありません。

    >うまく機能しなかったというのは、非表示がうまくいかなかったのか、スライダーがうまく動作しなかったのか教えていただけますか。
    スライダーがうまく動作しませんでした。(手動、自動スライド共に機能しない状態)
    表示非表示は問題なく動作しました。

    そもそもの原因がjsを追加したことではなく、spanタグで囲ったことであったのは、確認いただけましたか?
    確かにspanタグを削除するとスライダーは機能しますが、指定時刻にHTMLを変更するjsの動作に必要なspanタグ内のclassも消さないと機能しないため、目的が達成できません。

    >新しくクラスで管理したいのでしたら、別の質問にしたほうがいいかもしれません。
    私の理解不足かとは思うのですが、質問の趣旨が違ってきたから別の質問にすべきということでしょうか?

    キャンセル

  • 2017/05/18 13:48

    ご返答ありがとうございます。
    spanタグを取って、スライダーのliにclassをあてたら、動作しなくなったということでしょうか。
    追加したjsのコード(A)の処理の後ろに、bxsliderのjQuery(B)を移動してみてください。

    hide()で隠す → そのあとbxsliderを起動


    >確かにspanタグを削除するとスライダーは機能しますが、指定時刻にHTMLを変更するjsの動作に必要なspanタグ内のclassも消さないと機能しないため、目的が達成できません。
    >私の理解不足かとは思うのですが、質問の趣旨が違ってきたから別の質問にすべきということでしょうか?

    その通りです。原因がわからないうちはやむを得ない部分があるかと思いますが、表題と違う議題は、後々検索できた人に有用でないと思います。

    キャンセル

  • 2017/05/18 16:12

    > spanタグを取って、スライダーのliにclassをあてたら、動作しなくなったということでしょうか
    そのとおりです。

    > 追加したjsのコード(A)の処理の後ろに、bxsliderのjQuery(B)を移動してみてください。
    教えていただいた方法でうまくいきました。コードAをbodyタグ内最上部、コードBをその最下部に追加しました。

    > 表題と違う議題は、後々検索できた人に有用でないと思います。
    注意して質問させていただきます。

    キャンセル

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる