如何通过ID为多个div创建一个jQuery mouseover? [英] How to create a jquery mouseover for multiple divs by id?
问题描述
我正在尝试将一系列鼠标悬停事件归为一组,但是我对javascript真的很陌生,并且感到非常困惑.我有5个按钮,例如一个波纹管,我想创建一个功能将它们全部包含在内.我将divs的类用于此处未包括的另一个功能.我相信我必须使用id进行鼠标悬停.
Hi I am trying to group a series of mouseover events to one but I am really new to javascript and getting really confused. I have 5 buttons like the one bellow and I want to create one function to include them all. I use the class of the divs for another function not included here. I believe that I have to use the ids for the mouseover.
$('#trigger1').mouseover(function(){
$('#roll1r').fadeOut('slow');
});
http://jsfiddle.net/alexnode/fCw6y/2/
我使用条件来定义要隐藏的元素,但是我不确定如何定义变量并将其传递给渐变功能.我尝试了各种语法将其作为字符串传递,但是我不明白这是什么问题.
I use the conditional to define which element I want to hide but I am not sure how to define the variables and pass them to the fade out function. I have tried all sort of syntax to pass it as a string but I don't understand what is the problem.
$('#trigger1, #trigger2, #trigger3').mouseover(function () {
var roll = null;
var that = $(this);
if (that==="#trigger1"){roll = "$('#roll1r')";}
else if(that==="#trigger2"){roll ="$('#roll2r')";}
else if(that==="#trigger3"){roll = "$('#roll3r')";}
console.log(roll);
roll.fadeOut({
duration:300,
// fail: that.hide()
});
});
<div class="buttoncontainer" >
<div id="buttonbg1">
<img id="roll1" class="translatebuttons" src="images/buttonover.png" alt="Translation games">
<img id="roll1r" class="translatebuttons" src="images/button.png" alt="Translation games">
<div class="translatebuttons" id="tr1"></div>
<div id="trigger1" class="translatebuttons"></div>
</div>
<div id="buttonbg2">
<img id="roll2" class="translatebuttons" src="images/buttonover.png" alt="Translation games"> <img id="roll2r" class="translatebuttons" src="images/button.png" alt="Translation games">
<div class="translatebuttons" id="tr2"></div>
<div id="trigger2" class="translatebuttons"></div>
</div>
<div id="buttonbg3">
<img id="roll3" class="translatebuttons" src="images/buttonover.png" alt="Translation games"> <img id="roll3r" src="images/button.png" alt="Translation games">
<div class="translatebuttons" id="tr3"></div>
<div id="trigger3" class="translatebuttons"></div>
</div>
</div>
推荐答案
您正在寻找类似的东西吗?您可以通过一种处理程序简化代码的一种方法:
You are looking for something like this? One way you can simplify you code with just one handler:
$('[id^=trigger]').hover(function () {
var roll = $(this.id.replace(/trigger/, '#roll') + 'r');
roll.fadeToggle({
duration: 300
});
});
小提琴
- 使用 startswith 选择器选择全部触发器
- 使用 悬停 来获取鼠标输入/鼠标删除的快捷方式
- 使用简单的正则表达式替换来计算相应卷的ID
- 使用 fadeToggle 切换滚动的淡入状态. li>
- Use startswith selector to select all triggers
- Use hover for a shortcut to mouseenter/mouseleave
- use simple regex repalce to calculate the id of respective roll
- Use fadeToggle to toggle the fading state of roll.
Fiddle
这篇关于如何通过ID为多个div创建一个jQuery mouseover?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!