21886


`class="link-
block"`のついた`li`つまりリストをクリックした時、`.removeClass('active');`で`active`というクラスを削除するようにしたかったのですが、

なぜかリストをクリックしても反応せずに削除されません。

`id="maware"`の`li`だけは、反応して削除されます。

CSSにとしてもだめでした。どうも`class="link-
block"`のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？

[code]

    .link-block {
      display: block;
      z-index: 99999;
    }
    
[/code]

・ソースコード

[code]

    <!-- drawermenu -->
    <!-- drawermenu-button -->
    <div class="modal-button-wrap">
      <a class="animation-hover action-hover modal-button-wrap__button">
        <span class="modal-button-wrap__border"></span>
        <!-- border -->
        <span class="modal-button-wrap__border"></span>
        <!-- border -->
        <span class="modal-button-wrap__border"></span>
        <!-- border -->
      </a>
    </div>
    
    <!-- drawermenu -->
    <nav>
      <div id="nav__drawermenu-wrap">
        <ul>
          <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li>
          <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li>
          <li><a class="link-block" href="#js-gallary">GALLARY</a></li>
          <li><a class="link-block" href="#js-gmap">MAP</a></li>
          <li><a class="link-block" href="#js-contact">CONTACT</a></li>
          <li><a class="link-block" href="http:///index.html">TOP</a></li>
          <li><a class="link-block" href="http:///index.html">BLOG</a></li>
        </ul>
      </div>
    </nav>
    <!-- /drawermenu -->
    
[/code]

・JS

[code]

    $(function() {
      $('.kuruttosuru').on('click', function() {
        $(this).addClass('active');
        return false;
      });
    });
    
[/code]

[code]

    <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション -->
    <script>
      $(function() {
        $('.modal-button-wrap__button, .link-block').on('click', function() {
          $(this).removeClass('active');
          return false;
        });
      });
    </script>
    
[/code]

・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。  
下記に何かおかしくなる要素があるのでしょうか？

[code]

    <!-- ページ内遷移 -->
    <script>
      $(function() {
        // #で始まるアンカーすべてをクリックした場合に処理
        $('a[href^=#]').click(function() {
          // スクロールの速度
          var speed = 1000; // ミリ秒
          // アンカーの値取得
          var href = $(this).attr("href");
          // 移動先を取得
          var target = $(href == "#" || href == "" ? 'html' : href);
          // 移動先を数値で取得
          var position = target.offset().top;
          // スムーススクロール
          $('body,html').animate({
            scrollTop: position
          }, speed, 'swing');
          return false;
        });
      });
    </script>
    
[/code]

* * *

<https://jsfiddle.net/80od313c/>

上記に再現しましたが、こちらは実際にJSを動かすことはできないのですかね？


CC BY-SA 4.0
2016-02-08T03:31:24.397
21831
2019-12-13T19:15:32.403
2019-12-13T19:15:32.403
32986
14320
question
javascript jquery
クリックファンクションがうまくいきません。


気になる点が3つほどありましたのでまずはこの点から修正されてみてはいかがでしょう。

リンク先のjsfiddleはjavascript欄にHTMLタグが入っているので動きません。

<https://jsfiddle.net/80od313c/>

[code]

    $(function() {
      // 1. `kuruttosuru`クラスはHTMLに存在しないため以下動作しない
      $('.kuruttosuru').on('click', function() {
        $(this).addClass('active');
        
        return false;
      });
    });
    
    $(function() {
      $('.modal-button-wrap__button, .link-block').on('click', function() {
        $(this).removeClass('active');
        
        return false;
      });
    });
    
    $(function() {
      // 2. セレクタの記述ミス
      // $('a[href^=#]').click(function() {
      $('a[href^="#"]').click(function() {
        var speed = 1000;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 3. `#js-about-me`も`#js-contact`もHTML内に存在しないので以下動作しない
        var position = target.offset().top;
        
        $('body,html').animate({scrollTop:position}, speed, 'swing');
    
        return false;
      });
    });
[/code]

[code]

    .link-block {
      display: block;
      z-index: 99999;
    }
[/code]

[code]

    <div id="nav__drawermenu-wrap">
      <ul>
        <li id="maware">
          <a class="link-block" href="#js-about-me">ABOUTME</a>
        </li>
        
        <li>
          <a class="link-block" href="#js-contact">CONTACT</a>
        </li>
      </ul>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
[/code]

* * *

【追加1】

> 下記のコメントアウトがHTMLなので、動かないということでしょうか？ <\-- -->

そのとおりです。言語によってコメントアウトのやり方は異なります。

> スクリプトタグ削除しないといけないということでしょうか？

javascript部分には基本的にHTMLタグを記入してはいけません。

> それでも動きません。もしかして下記のコメントアウトも削除する必要があるのでしょうか？ //

`//`形式のコメントはjavascript内で使用することができますので削除する必要はありません。

> jsfiddle.net/80od313c/1 スクリプトタグも下記は削除しましたがうまくいきません。jsfiddle.net/80od313c/2
> ・また下記のようにしてみましたが、変わりませんでした。＃に””が抜けているということでよろしいでしょうか？ $(function(){ //
> #で始まるアンカーすべてをクリックした場合に処理 $('a[href^="#"]').click(function() { ～

他にもエラー箇所があるので動かないのだと思います。`F12`キーを押すと開発者コンソールを表示することができますので表示されるエラーを確認してみてください。

<http://www.buildinsider.net/web/chromedevtools/01>

jsFiddleのJavaScriptにもコメントつけてみたので参考にしてください。

[code]

    $(function() {
      $('.kuruttosuru').on('click', function() {
        $(this).addClass('active');
    
        return false;
      });
    });
    
    $(function() {
      $(document).on('click', '.overlay-haikeikurokari, #maware, .link-block, .showMenue', function() {
        //ulをクリックすると、メニューが戻る
        $('.kuruttosuru').removeClass('active');
        // $(this).off('click');
      });
    });
    
    $('.modal-button-wrap__button, .link-block').click(function() {
      //ulをクリックすると、メニューが出たり戻ったりする
      $('#drawermenu ul').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
    });
    
    $('#drawermenu ul li').click(function() {
        //ulをクリックすると、メニューが出たり戻ったりする
        $('#drawermenu ul').toggleClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
    });
    
    $(document).on('click', '.overlay-haikeikurokari, #js-drawermenu__gototop, .showMenue', function() {
        //.メニューが出る必要はなく、戻る動きだけ必要な場合
        $('#drawermenu ul').removeClass('showMenue');//モーダルのクラスを削除して、モーダルボディーを戻す
    });
    
    $('.modal-button-wrap, .modal-button-wrap__button').css('display', 'none');
    
    $(window).scroll(function() {
      if($(window).scrollTop() > 8) {
        $('.modal-button-wrap,.modal-button-wrap__button').fadeIn();
      }
      else {
        $('.modal-button-wrap,.modal-button-wrap__button').fadeOut();
      }
    });
    
    $('.modal-button-wrap__button').click(function() {
      //透明の背景、オーバーレイのhtmlを作る
      $('body').append('<div class="overlay-haikeikurokari"></div>');
    
      //透明の背景、オーバーレイをフェードイン
      $('.overlay-haikeikurokari').fadeIn('slow');
    
      //ここをクリックすると黒い背景がフェードアウト
      $('.overlay-haikeikurokari, .close, #drawermenu, .link-block, .showMenue').click(function() {
        //透明の背景をフェードアウト
        $('.overlay-haikeikurokari').fadeOut('slow');
    
        // 透明の背景オーバーレイはフェードアウトしてから削除
        $('.overlay-haikeikurokari').fadeOut('slow', function() {
          $('.overlay-haikeikurokari').remove();
        });
      });
    });
    
    // ==================================================
    // 属性セレクタの値部分はクオートで囲んでください
    // NG: $('a[href^=#]')
    // OK: $('a[href^="#"]')
    // 参考URL: http://semooh.jp/jquery/api/selectors/%5Battribute+start+value%5D/
    // ==================================================
    
    $(function() {
      // #で始まるアンカーすべてをクリックした場合に処理
      $('a[href^=#]').click(function() {
        // スクロールの速度
        var speed = 1000; // ミリ秒
        // アンカーの値取得
        var href= $(this).attr("href");
        // 移動先を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top;
        // スムーススクロール
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
      });
    });
    
    //5回目モーダルウィンドウ
    // #course figureをクリック 下記の要素をクリックすると、始まる
    $('.yufu-pcimage, .yufu-tabletimage, .yufu-spimage').click(function() {
      //オーバーレイのhtmlを作る
      $('body').append('<div class="overlay"></div>');
      //オーバーレイをフェードイン
      $('.overlay').fadeIn('slow');
    
      // モーダルコンテンツのIDを取得
      var modal = '#' + $(this).attr('data-tutor');
       // モーダルコンテンツフェードイン
      $(modal).fadeIn('slow');
      // 「.modal-overlay」あるいは「.modal-close」をクリック
      $('.overlay, .close').off().click(function() {
        // モーダルをフェードアウト
        $(modal).fadeOut('slow');
        // オーバーレイはフェードアウトしてから削除
        $('.overlay').fadeOut('slow', function() {
          $('.overlay').remove();
        });
      });
    });
    
    // ==================================================
    // $.fn.GoogleMaps メソッドを利用できるライブラリが読み込まれていません
    // 必要なライブラリをHTML部分で読み込んでください
    // ==================================================
    
    $(function() {
      $('#gmap').GoogleMaps({  
        lat: 33.264447,      // 緯度  
        lng: 131.3555,     // 経度  
        zoom: 18             // ズームレベル  
      });  
    });
    
    $('#gototop, #js-drawermenu__gototop').click(function() {
      $('body,html').animate({scrollTop:0}, 1000);
    });
    
    // $('#gototop').css('display','none');
    // $(window).scroll(function(){
    //     if($(window).scrollTop() > 200) {
    //       $('#gototop').fadeIn();
    //     }else{
    //       $('#gototop').fadeOut();
    //     }
    // });
    
    $(function() {
      $(window).ready(function() {
        $('.js-fadein-from-bottom').each(function() {
          var elemPos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > elemPos - windowHeight + 0) {
            $(this).addClass('scrollin');
          }
        });
      });
    });
    
    $(function() {
      $(window).scroll(function() {
        $('.top-gnav__link-fifth, .translate3d-to-upper-left, .contact__submit-btn').each(function() {
          var elemPos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > elemPos - windowHeight + 50) {
            $(this).addClass('scrollin');
          }
        });
      });
    });
    
    $(function() {
      $(window).scroll(function() {
        $('.translate3d-lower-right').each(function() {
          var elemPos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > elemPos - windowHeight + 350) {
              $(this).addClass('scrollin');
          }
        });
      });
    });
    
[/code]


CC BY-SA 3.0
2016-02-08T07:52:36.997
21844
2016-02-08T13:53:46.780
2016-02-08T13:53:46.780
13493
13493
21831
answer


大元の疑問と思われる以下の点についてのみお答えします。

> `class="link-block"` のついた `li` つまりリストをクリックした時、`.removeClass('active');` で
> `active`
> というクラスを削除するようにしたかったのですが、なぜかリストをクリックしても反応せずに削除されません。id="maware"のliだけは、反応して削除されます。

下の「スニペットを実行」をクリックして、現れた3つのリンクをクリックしてみてください。`.link-block` と `#hoge`
が指定された最後のリンクは2つのアラートが表示されそうですが、片方しか表示されません。

[code]

    $(function() {
      $('.link-block').on('click', function() {
        alert('link-block clicked!')
        return false;
      });
      $('a[href^="#"]').click(function() {
        alert('a[href^="#"] clicked!')
        return false;
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
      <li><a href="#hoge">href</a></li>
      <li class="link-block"><a href="">class</a></li>
      <li class="link-block"><a href="#hoge">class+href</a></li>
    </ul>
[/code]

この原因は `return false;` にあります。

上の2番目のリンクでは `<a>` をクリックしたにも関わらず `<li>`
のclickイベントハンドラが呼び出されていますよね。これは親要素にイベントが伝播される「イベントのバブリング」という仕様によるものです。

あなたはリンクをクリックしてもページ遷移が起きないように `return false;`
を書いたのだと思いますが、この記述はイベントのバブリングも止めてしまいます。そのため、

  1. ユーザーがリンクをクリックした
  2. まず `a[href^="#"]` に設定されたイベントハンドラが呼び出される
  3. このイベントハンドラは `return false;` しているので、 **ここでバブリングが止まる**
  4. `<li>` にイベントが伝播しないので、`.link-block`に対するイベントハンドラも実行されない

という動きになってしまっています。

ブラウザデフォルトの挙動は抑制しつつバブリングは残したい、という場合には、イベントハンドラに引数として渡される Event オブジェクトの
`preventDefault()` を呼び出します。

[code]

    $(function() {
      $('.link-block').on('click', function(e) {
        alert('link-block clicked!')
        e.preventDefault();
      });
      $('a[href^="#"]').click(function(e) {
        alert('a[href^="#"] clicked!')
        e.preventDefault();
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
      <li><a href="#hoge">href</a></li>
      <li class="link-block"><a href="">class</a></li>
      <li class="link-block"><a href="#hoge">class+href</a></li>
    </ul>
[/code]

逆に、イベントの伝播のみ抑制するには `stopPropagation()` を使います。jQuery経由で設定したイベントハンドラで `return
false;` すると `prependDefault()` と `stopPropagation()` の両方が実行される、ということになります。

参考

  * [jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について](http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c)
  * [DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita](http://qiita.com/hosomichi/items/49500fea5fdf43f59c58)


CC BY-SA 3.0
2016-02-09T04:58:52.483
21886
2016-02-09T04:58:52.483
8000
21831
answer