使用不同事件的相同功能

這看起來很簡單，但我無法弄清楚。我是新來的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

使用不同事件的相同功能

回答

相關問題