所以我一直在尝试编写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>
如果有人能帮助我那将是非常棒的。我希望我解释得很好。
答案 0 :(得分:2)
这可能会做你想要的。也许
$('.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)
$('.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');
});
如果您向目的地添加其他类
,它仍然有效