2

だから私は、別の要素がホバーされたときに1つの要素をアクティブにするjqueryを書こうとしています。これは、場所がホバーされたときにマップ上の領域を強調表示するために使用されます。

次を使用して、1つの宛先で機能しています：

function engageMaps(){ 
  var destination = $(".destination .cancun"); 
  var pin = $(".image_map .cancun"); 
  $(destination).hover( 
    function () { 
      $(pin).addClass("active"); 
    }, 
    function () { 
      $(pin).removeClass("active"); 
    } 
  );
};

しかし、要素クラスに基づいたすべての目的地で機能する必要があります。クラスが一致する場合、それらはアクティブになります。

私はこのようなことをやってみました（動作しません。おそらく間違って書かれています）

function engageMaps(){ 
  var destination = (($(".destination").children()).attr('class')); 
  var pin = (($(".image_map").children()).attr('class'));
  if($(destination) === $(pin)){
    $(destination).hover( 
      function () { 
        $(pin).addClass("active"); 
      }, 
      function () { 
        $(pin).removeClass("active"); 
      } 
    );
  };
};

ここにhtmlがあります：

<div class="image_map">
  <a class="cancun" id="cancunPin" href="#">Cancun</a>
  <a class="cozumel" id="cozumel" href="#">Cozumel</a>
</div>
<div class="destinations">
  <ul>
    <li class="destination"><a class="cancun" href="#">Cancun</a></li> 
    <li class="destination"><a class="Cozumel" href="#">Cozumel</a></li>
  </ul>
</div>

誰かが私を助けることができれば、それは素晴らしいことです. 十分に説明したことを願っています。

4

3 に答える 3

2

これはあなたが望むことをするかもしれません。多分。

http://jsfiddle.net/sUgyW/

$('.destinations a').hover(
    function () {
        $('.image_map a.' + $(this).attr('class')).addClass('active');
    },
    function () {
        $('.image_map a').removeClass('active');
    }
);

また、HTML を少し調整class="Cozumel"しましたclass="cozumel"。

于 2012-05-25T19:22:00.367 に答える
1

これは、アイテムが 1 つのクラスを持っている場合に限ります (「cancun」のみ、「map cancun comething else」ではありません)。

function engageMaps(){ 
  var destination = $(".destination a"); 
  $(destination).hover( 
    function () { 
      var pin = $(".image_map ."+$(this).attr("class")); 
      $(pin).addClass("active"); 
    }, 
    function () { 
      var pin = $(".image_map ."+$(this).attr("class")); 
      $(pin).removeClass("active"); 
    } 
  );
};

それ以外の場合は、すべての場所 (技術的にはクラス) のリストを作成し、それらを反復処理できます。

function engageMaps(cls){ 
  var destination = $(".destination ."+cls); 
  var pin = $(".image_map ."+cls); 
  $(destination).hover( 
    function () { 
      var pin = $(".image_map ."+cls); 
      $(pin).addClass("active"); 
    }, 
    function () { 
      $(pin).removeClass("active"); 
    } 
  );
};
var classes = ["cancun", "cozumel"];
for (var i=0; i<classes.length; i++) {
    engageMaps(classes[i]);
}
于 2012-05-25T19:23:20.253 に答える
0

このようなものが機能します。ただし、宛先クラスが image_map クラスと一致する場合のみ (何らかの理由で現時点では一致しません)

$('.destinations a').hover(function(){
    $('.image_map .'+$(this).attr('class')).addClass('active');
},function(){
    $('.image_map .'+$(this).attr('class')).removeClass('active');
});

私はおそらく次のように変更します：

<div class="image_map">
  <a id="cancun" href="#">Cancun</a>
  <a id="cozumel" href="#">Cozumel</a>
</div>

<div class="destinations">
  <ul>
    <li><a data-location="cancun" href="#">Cancun</a></li> 
    <li><a data-location="cozumel" href="#">Cozumel</a></li>
  </ul>
</div>

そして使用する

$('.destinations a').hover(function(){
    $('.image_map #'+$(this).data('location')).addClass('active');
},function(){
    $('.image_map #'+$(this).data('location')).removeClass('active');
});

そのようにして、追加のクラスを宛先に追加しても機能します

于 2012-05-25T19:23:34.140 に答える