如果两个不同节类的子节点匹配,如何调用jQuery函数?

时间:2012-05-25 19:12:05

标签: javascript jquery variables css-selectors

所以我一直在尝试编写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>

如果有人能帮助我那将是非常棒的。我希望我解释得很好。

3 个答案:

答案 0 :(得分: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"

答案 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]);
}

答案 2 :(得分: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');
});

如果您向目的地添加其他类

,它仍然有效