2

所以我一直在尝试编写 jquery 来使一个元素在另一个元素悬停时变为活动状态。这将用于在悬停位置时突出显示地图上的区域。

我让它为一个目的地工作，使用：

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

那是当且仅当项目具有一个类（例如“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 回答