0

私はこのフィドルのフォークに取り組んできました- すべての小道具は元の作者に送られます。

ImageMapster と連携して、イメージ マップにカーソルを合わせると html リスト アイテムが強調表示され、逆に、リスト アイテムにカーソルを合わせると適切な画像マップが強調表示されるように設計されています。ご想像のとおり、適切な場所にクラスを追加および削除することで機能します。

メニュー項目のアンカーとそのリスト項目ラッパーの両方に独自のクラスを多数追加する Drupal 7 でそのコード (およびそのバリエーション) を使用しようとしています。その余分なマークアップが上記のスクリプトで問題を引き起こしているため、頭を悩ませています。

たくさんの試行錯誤を経て (私は JS があまり得意ではありません!)、特に Drupal が「menu-depth-1」のクラスを li に追加すると、スクリプトが失われ、エラーがスローされることに気付きました。 (Chrome から):

Uncaught Error: Syntax error, unrecognized expression: area[name=part-1 menu]

上記のスクリプトのこのフォークで、追加したのは Drupal が追加するマークアップだけです。

http://jsfiddle.net/PUncle/Tr4hE/32/

元のスクリプトを次のように変更します。

<li class="menu-item-a"><a href="#">Part A</a></li>

に：

<li class="leaf menu-depth-1 menu-item-a"><a href="#">Part A</a></li

私が理解している限り、スクリプトはハイフン付きのセレクターを探しており、目的の「menu-item-a」に到達する前に「menu-depth-1」に遭遇すると失敗します。

特にスクリプトのこの部分に問題があると思いますが、何を試しても修正方法がわかりません。

function highlightArea(key) {
    $('area[name=part-' + key + ']').mouseenter();
    $('a').removeClass('hover');
    $('li.menu-item-' + key + ' a').addClass('hover');
}

私がする必要があるのは、スクリプトを「強化」して、特定のセレクターを非常に明確にターゲットにし、他のものを無視することです。

私は Drupals の過剰なメニュー マークアップをクリーンアップする道をたどり始めましたが、「鈍い」コードへの道を切り開くことは、そのコードを鋭くして他に影響を及ぼさないようにすることほど効果的ではないと判断しました!

任意のポインタをいただければ幸いです。

4

2 に答える 2

0

これを試して

        $('a').hover(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightArea(part);
        });

        //
        $('a').mouseleave(function () {
            var parts = $(this).closest('li').attr('class').split(' ');
            var parts1 = parts[1].split('-');
            var part = parts1[2];
            highlightAreaX(part);
        });
于 2013-07-10T13:17:31.220 に答える