2

私の問題を解決する方法を見つけようとして、過去 3 日間頭を悩ませていました。

このページhttp://www.hungryhippo.se/test/contact.htmlでやりたいことは 、オフィス DIV の上にカーソルを置いたときに、そのオフィスの人々が強調表示され、他の人々が 50 の不透明度を取得することです。 %。

この第 2 段階では、クリックまたはホバー時に、マップがそのオフィスに関連するマップに置き換えられます。これを解決しようとしたときに気付いたのは、dreamweaver を介して取得した Google マップ ウィジェットでエラーが発生し、マップの代わりに灰色のバーが表示されるため、非表示を使用できないことです。

次に、このスクリプト /TennG/ を jsfiddle から使用しました

したがって、私が考えていた解決策の 1 つは、可視性を使用することです。次に、非表示の高さを 0px にして、表示する必要があるときに 100% に拡大します。

あなたが私に完全なコード（理解できる）を与えなくても、ただ私を正しい方向に押してください。HTMLのホットショットではありません.jqueryは、それに追いつくために私にとって新しいものです。

ありがとう！

4

2 に答える 2

2

ページのHTMLは複雑すぎて（divitisの場合があるようです）、それを使って何をする必要があるかを直接答えることはできませんが、一般的な意味では、「個々の人のdivと一緒に「heading」オフィスdivを作成すると、フェード効果を追加するのはかなり簡単です。たとえばdata-、見出しに属性を指定して、関連するすべての人のdivが持つクラスを指定できます。たとえば、次のようになります。

<div class="office" data-office="Stockholm">Stockholm Office</div>
<div class="office" data-office="Denmark">Denmark Office</div>
<div class="office" data-office="LA">Los Angeles Office</div>

<div class="person Stockholm">Stockholm<br>Amanda Atkins</div>
<div class="person Stockholm">Stockholm<br>Benjamin Bovington</div>
<div class="person Denmark">Denmark<br>Carolyn Carson</div>
<div class="person LA">Los Angeles<br>Dave Duncan</div>
<div class="person LA">Los Angeles<br>Evelyn Edwards</div>

次に、属性を使用して関連付けられた人を検索するクラス「office」のdivにホバーハンドラーを追加しdata-officeます。または、場合によっては、関連付けられていない人を検索して不透明度を下げます。

$(document).ready(function() {
    $(".office").hover(function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 0.5);
    }, function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 1);
    });
});

デモ： http： //jsfiddle.net/EHrcb/

（「person」divもdata-属性を使用できた可能性がありますが、クラスで選択する方が簡単なので、それを使用しました。）

同じ概念を使用して各オフィスに適切なマップを表示できると思いますが、不透明度を設定するのではなく、可視性などを使用または設定.hide()します。.show()

既存のhtmlは無効であることに注意してくださいid。複数の要素に同じものを使用することは想定されていません。

于 2012-11-25T01:14:26.470 に答える
2

jQueryを使用している人々のためのソリューション

任意の要素に複数のクラスを追加できるため、都市を表すクラスと、マップのパンに使用するデータ属性を追加できます（回答の下部にある最後の編集のメモを参照してください）

<div class="contact_office_people stockholm" data-map-coordinates="[ lat,lng]">

あなたのオフィスの場所で、DIVはjQueryメソッドdata-で簡単に読み取ることができるオフィスのhtml5属性を追加しますdata()

<div class="contact_office_container" data-office="stockholm">

jQueryを使用できるようになりましたhover()

var $people=$('.contact_office_people');

$('.contact_office_container').hover(function(){
     /* this part of hover covers mouseenter event*/
     /* "this" is the current element behing hovered*/
      var peopleClassSelectorString = '.' + $(this).data('office') ; 
      $people.not( peopleClassSelectorString).css({opacity: .5});        


},function(){
    /* this part of hover covers mouseleave event*/
    $people.css({opacity: 1});
})

編集：グーグルマップに関する限り、マーカーのmouseenter/mouseleaveイベントを使用して取得できるマップマーカーオブジェクトにデータをバインドできます。人々やオフィスのクラスの形式を理解したら、Googleマップでタグ付けされた別の質問を作成して、マーカーにデータを追加し、イベントでデータを取得する方法を学ぶことができます。

2番目の編集：実際には地図は難しくありません、あなたはグーグルマップpanTo( coordinates)方法を使うことができます。data-それらに属性を追加しました。

googleMapsAPIを見る

于 2012-11-25T01:17:57.023 に答える