使用不同事件的相同功能

这看起来很简单，但我无法弄清楚。我是新来的JavaScript/jQuery。使用不同事件的相同功能

我想触发一个函数来移动div onmouseover和另一个onmouseout。我想在几个不同的div上调用这个相同的函数。我怎么会这样做，而不写多个功能？

<div id="indexJoinBanner" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
    <!-- end #indexJoinBanner --></div> 
    <div id="indexJoinBanner2" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"> 
    <!-- end #indexJoinBanner2 --></div> 



function moveDivRight(){ 
    $("#indexJoinBanner").animate({ 
    left: "0px", 
    },500); 
}; 

function moveDivLeft() { 
    $("#indexJoinBanner").animate({ 
    left: "-150px", 
    },500); 
}

感谢

来源

2012-08-25 vinylDeveloper

传递参数识别'div' 。 – toniedzwiedz

你可以在div传递给函数一样

<div id="indexJoinBanner" onmouseover="moveDivRight(this)" onmouseout="moveDivLeft(this)">

，并用它在功能

function moveDivRight(div){ 
    $(div).animate({ 
    left: "0px", 
    },500); 
}; 

function moveDivLeft(div) { 
    $(div).animate({ 
    left: "-150px", 
    },500); 
}

this在属性指定当前元素。

另外，您可以使用.on()代替的onmouseover和onmouseout属性附加处理，给所有你要附加的处理程序类的元素，然后

$('.someclass').on('mouseover', function() { 
    $(this).animate({ 
    left: "0px", 
    },500); 
}).on('mouseout', function() { 
    $(this).animate({ 
    left: "-150px", 
    },500); 
})

DEMO

来源

2012-08-25 22:26:01 Musa

虽然我喜欢你的第二种方法的理论。我无法让它工作。但是，你的第一种方法很好。谢谢 – vinylDeveloper

@vinylDeveloper SEE DEMO – Musa

$("#indexJoinBanner, #indexJoinBanner2").hover(function() { 
    $(this).animate({left: '0px'}, 500); 
}, 
function() { 
    $(this).animate({left: '-150px'}, 500); 
});

.hover允许你绑定鼠标悬停和鼠标移开同时，但你也可以单独将它们绑定。

您可以使用this来引用作为绑定目标的对象（即使您一次绑定到多个元素）。

如果需要，还可以绑定命名函数。

注意：在这个解决方案中，onmouseover等属性在HTML中根本不需要。

来源

2012-08-25 22:17:00

谢谢。我不接受这个，因为我不想在添加另一个div时添加一行到该函数。尽管如此，仍然有效。谢谢 – vinylDeveloper

你是什么意思的“添加一条线的功能？”你的意思是添加到选择器？然后不要使用ID。给每个你想拥有这些动画属性的div，并且绑定到该类。 –

-2

<div id="indexJoinBanner" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"></div> 
<div id="indexJoinBanner2" onmouseover="moveDivRight()" onmouseout="moveDivLeft()"></div> 

<script> 
$(document).ready(function() { 
    $('#indexJoinBanner').mouseover(function() { 
     $(this).animate({left: '0px'}); 
    }); 

    $('#indexJoinBanner2').mouseover(function() { 
     $(this).animate({left: '0px'}); 
    }); 

    $('#indexJoinBanner').mouseout(function() { 
     $(this).animate({left: '-150px'}); 
    }); 

    $('#indexJoinBanner2').mouseout(function() { 
     $(this).animate({left: '-150px'}); 
    }); 
}); 
</script>

来源

2012-08-25 22:17:22 Ananth

哦，看，多种功能，_just像OP不想要的！_ – Alnitak

使用不同事件的相同功能

回答

相关问题