1

ホバーまたは選択すると色が変わるドットでマークされた個々の番号付き施設を含むマップがあります。選択すると、別のコンテナー内のテキストは、選択した施設に応じて内容が変わります。

地図の下に数字の凡例もあります。凡例テキストをクリックすると、コンテナーのテキスト コンテンツも変更されます。ドットまたは凡例のいずれかをクリックすると、ホバーされて選択されたドットまたは凡例テキストの色が変更されます。

今、ドットの上にマウスを置いたりクリックしたりする効果を組み合わせて、関連する凡例テキストをトリガして選択したり、その逆をしたりしようとしています。

これはjQueryでの私の最初の試みなので、理解してください! 私はこれに約1日しかいません。できるだけ多くのことを読んでください。これはおそらく簡単な解決策ですが、私にはわかりません。ドットと凡例テキストを組み合わせて新しい変数を作成し、共有施設名を介してそれらをリンクしようとしましたが、うまくいきませんでした。on (bind) コマンドでアクションをリンクできると思ったのですが、それもうまくいきませんでした。どんな提案でも大歓迎です。前もって感謝します！

コード

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="map_container">
<a class="dot" style="left: 315px; top: 189px;" facility="bldg4" work="bldg4work"></a>
<a class="dot" style="left: 514px; top: 188px;" facility="bldg7" work="bldg7work"></a>
<div class="legend">
4. <a class="legt" facility="bldg4" work="bldg4work">Primary Clarifiers - West</a><br />
7. <a class="legt" facility="bldg7" work="bldg7work">Secondary Clarifiers</a><br />
</div>
</div>
<script>
$("a.dot, a.legt").on({click: function(){
$("a.dot").removeClass("selected");
$(this).addClass("selected");
$("a.legt").removeClass("selected");
$(this).addClass("selected");
var work = ".work_detail#" + $(this).attr("work");
var htmlCode = $(work).html();
$(".detail_container").fadeOut(500, function(){
$(".detail_container .work_detail").html(htmlCode);
$(".detail_container").fadeIn(500);
});
}
});
</script>
</body>
</html>

css
.map_container a.dot {
display: block;
height: 20px;
width: 20px;
background-image: url(../images/dots.png);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
position: absolute;
}
.map_container a.dot:hover {
background-position: 0px -20px;
}
.map_container a.dot.selected {
background-position: 0px -40px;
}   
.map_container a.legt {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #F00;
font-weight: bold;
text-decoration: none;
}
.map_container a.legt:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FF0;
font-weight: bold;
background-color: #630;
text-decoration: none;
}
.map_container a.legt.selected {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #0F0;
background-color: #630;
}

ホバーのためにこれを試しました-構文がおそらく正しくないことはわかっていますが、近いですか?

    $('a.dot[facility*]').hover(function(){
    $('a.legt[facility*]').toggleClass('a.legt.hover');
    });
4

2 に答える 2

2

2つの要素のホバー状態を同時に変更する必要がある場合は、疑似クラス：hoverを削除して、jQueryに処理させる必要があります。私はあなたの：hoverを.hoverクラスに変えました。次に、mouse-enterでクラスをドットに適用し、凡例とmouse-leaveで両方からクラスを削除します。例を使用してフィドルを作成しました（ドットが機能するようにするには、ドットの背景色を変更する必要がありました。その部分を削除できます）。また、カスタム属性の場合は、コメントに記載されているデータ属性を使用する必要があります。これがjsFiddleの例です

HTML

<div class="map_container">
    <a class="dot" style="left: 315px; top: 189px;" data-facility="bldg4" data-work="bldg4work"></a>
    <a class="dot" style="left: 514px; top: 188px;" data-facility="bldg7" data-work="bldg7work"></a>
    <div class="legend">
        4. <a class="legt" data-facility="bldg4" data-work="bldg4work">Primary Clarifiers - West</a><br />
        7. <a class="legt" data-facility="bldg7" data-work="bldg7work">Secondary Clarifiers</a><br />
    </div>
</div>​

jQuery

$('a.dot, a.legt').on({
    mouseenter : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').addClass("hover");
    },
    mouseleave : function(){
        var facility = $(this).data('facility');
        $('a[data-facility='+facility+']').removeClass("hover");
    },
    click: function() {
            var $this = $(this),
            facility = $this.data('facility'),
            work = $this.data('work'),
            htmlCode = $('.work_detail#'+work).html(),
            $detailContainer = $('.detail_container');

        $('a.dot, a.legt').removeClass('selected');
        $('a[data-facility='+facility+']').addClass("selected");

        $detailContainer.fadeOut(500, function() {
            $detailContainer.find(".work_detail").html(htmlCode).end().fadeIn(500);
        });
    }
});​

CSS

.map_container a.dot.hover {
    background-position: 0px -20px;
}
.map_container a.legt.hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #FF0;
    font-weight: bold;
    background-color: #630;
    text-decoration: none;
}
于 2012-12-27T19:22:12.003 に答える
1

施設属性の開始値として建物が必要であると仮定します。また、アンカーに href を追加し、アンカー タグのテキストも追加する必要があります。

ライブデモ

 $('a.dot[facility^=bldg]').hover(function(){
    $('a.legt[facility^=bldg]').toggleClass('a.legt.hover');
 });
于 2012-12-27T17:54:14.960 に答える