0

私のウェブサイトにjquery Spotlightスニペット（Dev7Studiosによる）を挿入しようとしています。次のシナリオで解決する必要があります。

「Div A」にマウスを合わせると、「Div B」が強調表示されます。jQueryの非競合モードで作業する必要があります。これまでのところ、私が使用するスクリプトは次のとおりです。

jQuery.noConflict();
jQuery(window).load(function() {

    jQuery('#A, #B').bind('mouseover', function(){
        jQuery(this).spotlight({exitEvent:'mouseover', speed:600});

    });

});

次のスクリプトでは、マウスオーバーすると各 div が強調表示されますが、「Div A」、「Div B」をマウスオーバーすると強調表示されるようにする必要があります。これは理想的なソリューションです。

考えられる解決策は、「Div A」にマウスを合わせると、「Div B」が Div A とともにハイライトされることです。

現時点では、私が持っているスクリプトでは、その Div だけが強調表示されています。

アイデアはありますか？

ありがとうございました！

4

2 に答える 2

1

OPコメントごとに更新：

どの要素が他の要素に影響を与えるかのマップを作成できます。おそらく、A は Z に影響を与え、B は A に影響を与えるなどです。これはユーザーが定義します。次に、マップの値をループするだけです。

デモ: http://jsfiddle.net/lucuma/4RFWQ/1/

 var map = { 
"#A" : "#B",
"#B" : "#A",
"#Z" : "#A"
}; 

jQuery.each(map, function(key, value) { 
  var val = value;
  jQuery(key).on('mouseover', function() {
      jQuery(val).spotlight({exitEvent:'mouseover',      speed:600});
  });

});​

配列をループしてバインドすることもできます

オリジナル：

一般化するには、次のようにする必要があると思います。

<div id="a" data-coord="b"></div><div id="b" data-coord="a"></div><div id="z" data-coord="b"></div>

jQuery.noConflict();
jQuery(window).load(function() {

jQuery('#A, #B').bind('mouseover', function(){
    jQuery('#' + jQuery(this).attr('data-coord')).spotlight({exitEvent:'mouseover', speed:600});

});

});
于 2012-05-30T19:38:21.630 に答える
1

以下のように、#a にマウスオーバーした後、#b で jQuery セレクターを呼び出すだけです。

jQuery('#A').bind('mouseover', function(){
  jQuery('#B').spotlight({exitEvent: 'mouseover', speed:600});
});
于 2012-05-30T19:37:22.973 に答える