2

ページには、米国とカナダの SVG マップと、州と州の HTML リストがあります。リスト内の名前またはマップ上の描写のいずれかの州にカーソルを合わせると、名前と描写の両方が異なる色に変わるはずです。すべての名前とパスには、すでに論理 ID/クラスがあります。

これが私のコードのフィドルです。（現時点ではひどい手続きの混乱ですので、ご容赦ください。）

jQuery のイベント関数は SVG では機能しません。おそらく役立つと思われる jQuery プラグインがあることは知っていますが、これは私が慣れ親しんでいるよりも多くの割合でバニラ Javascript を使用する良い機会になると思いました。

コードの最も重要な部分はmakeMapInteractive、Javascript の 46 ～ 69 行目の関数です。

function makeMapInteractive(provinces) {

    for(var province in provinces) { // Iterate over every state/province code
        var $HTMLtargets = $('ul.provinces li.' + province);
        var $SVGtargets = $('path#{0}, g#{0} path'.format(province));
        var $allTargets = $HTMLtargets.add($SVGtargets);

        // I tried it first with $().each(); when that didn't work,
        // I commented it out and tried without it. Neither one works.

        /* $allTargets.each(function() {
            this.addEventListener('mouseover', function(e) {
                console.log(e);
                $HTMLtargets.css('color', '#990000');
                $SVGtargets.attr('fill', '#990000');
            }, false)
        }); */

        for(var i = 0; i < $allTargets.length; i++) {
            $allTargets.get(i).addEventListener('mouseover', function(e) {
                $HTMLtargets.css('color', '#990000');
                $SVGtargets.attr('fill', '#990000');
            }, false);
        }
    }
}

私がやろうとしているのは、すべての要素にマウスオーバー リスナーを追加することです。これにより、その要素の州に関係するすべての要素の変更がトリガーされます。

実際に何が起こるかというと、ページ全体の何かにカーソルを合わせると、最後に追加されたイベント リスナーであるワイオミングのイベント リスナーがトリガーされます。変数を変更すると$allTargets、以前に追加されたすべてのリスナーが新しい値に含まれる要素に変更されます。しかし、jQuery オブジェクト自体ではなく、その変数内の DOM 要素にイベント リスナーを適用しているため、それがどのように起こっているのかわかりません。

誰かがここで何が起こっているのか正確に説明できますか? ここでjQueryを少し使用していることは知っていますが、すでに使用している以上の答えは使用しないでください。向上させる必要があるのは、私のバニラ Javascript スキルです。

4

1 に答える 1