別functionの中でfunctionを上書きできない

jQueryを使って、クリック後に既に定義しているホバーアクションが変わる仕組みを実装したいと考えています。

具体的には、ボタンがクリックされる以前までは、ホバーした時にボタンの背景色が変わるように実装して、いずれかのボタンがクリックされた際にはホバーしても色は変わらず、また別のボタンがクリックされた場合にそのボタンの色が変更されるような仕様を想定しています。

CSSを使って制御したいところではあるのですが、使用しているCMSの性質上、HTMLを並べて mouseenter と mouseleave を使って実装しなければなりません。

HTML
1<ul>
2  <li class="target">
3    <button class="visible" style="background: blue;">
4      ホバーしていない時
5    </button>
6    <button class="hover-visible" style="background: red;">
7      ホバーしている時
8    </button>
9  </li>
10  <li class="target">
11    <button class="visible" style="background: blue;">
12      ホバーしていない時
13    </button>
14    <button class="hover-visible" style="background: red;">
15      ホバーしている時
16    </button>
17  </li>
18</ul>

CSS
1.hover-visible {
2  display: none;
3}

下記のスクリプトでは、onHoverを最初に定義して、ユーザーがボタンをホバーした時に色を変更しています。クリックした後に、onHoverを動かないように上書きしたいのですが、しっかり上書きされずにclickの動きを再現できません。

JavaScript
1  $(function() {
2    var onHover = function() {
3      $(".target").on({
4        mouseenter: function() {
5          $(this)
6            .find(".visible")
7            .hide();
8          $(this)
9            .find(".hover-visible")
10            .show();
11        },
12        mouseleave: function() {
13          $(this)
14            .find(".hover-visible")
15            .hide();
16          $(this)
17            .find(".visible")
18            .show();
19        }
20      });
21    };
22
23    $(".target").click(function() {
24      $(".hover-visible").hide();
25      $(".visible").show();
26
27      $(this)
28        .find(".visible")
29        .hide();
30      $(this)
31        .find(".hover-visible")
32        .show();
33
34      var onHover = function() {
35        console.log("Hoverアクションを上書きする");
36      };
37    });
38
39    onHover();
40  });

お知恵を拝借させていただければと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

シンプルにこのように書かれてはいかがですか？

JavaScript
1$('.target').on({
2  mouseenter: function() {
3    // 略
4  },
5  mouseleave: function() {
6    // 略
7  },
8  click: function() {
9    // 略
10
11    // 動かないようにしたいだけなら
12    $(this).off('mouseenter mouseleave');
13
14    // 上書きしたいなら
15    $(this).on('mouseenter mouseleave', function() {
16      console.log("上書きされたのでなにもしません");
17    });    
18  }
19});