Question

我有一些动态创建的div。它们看起来像这样：

<div class="item-logo"><img src="http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Face-9.jpg" /></div>
    <div class="item-move">No Move</div> 
    <div class="item-movee">No Move</div>
    <div class="item-moveee">No Move</div> 
    <div class="item-moveeee">Move Me</div> 

        <div class="item-logo"><img src="http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Face-9.jpg" /></div>
    <div class="item-move">No Move</div> 
    <div class="item-movee">No Move</div>
    <div class="item-moveee">No Move</div> 
    <div class="item-moveeee">Move Me</div>

这是我想要做的，所以我可以有一个脚本将执行每个div。这是我的脚本不起作用：我想移动.item-moveeee

$(".item-logo").mouseover(function() {
    // Set the effect type
    var effect = "slide";

    // Set the options for the effect type chosen
    var options = { direction: "left" };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;

    $(this).next().toggle(effect, options, duration);

  }).mouseout(function(){
     $(this).next().hide('slide',{direction:'left'});
});

这是一个不起作用的小提琴：http://jsfiddle.net/daveferrara1/4gBGq/

任何帮助将不胜感激：

Answer 1

重点是你说你动态创建了<div>。要为动态创建的对象创建jQuery函数触发器，请尝试这样：

＃1给你的div s包装/父母：

<div class="parent">
    <div class="item-logo"><img src="http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Face-9.jpg"/></div>
    <div class="item-move">No Move</div> 
    <div class="item-movee">No Move</div>
    <div class="item-moveee">No Move</div> 
    <div class="item-moveeee">Move Me</div> 
</div>

＃2尝试以下jQuery函数：

$(document).ready(function() {
    $(".parent").on("mouseover","div.item-logo",function () {
        // do what ever you want
        $(this).parent().find('.item-moveeee').html("*move*");
    });

    $(".parent").on("mouseout","div.item-logo",function () {
        // do what ever you want
        $(this).parent().find('.item-moveeee').html("Move Me");
    });
});

工作小提琴：http://jsfiddle.net/TyQ4V/

Answer 2

感谢@keypaul这里的小提琴jsfiddle.net/keypaul/U2w37

<div class="wrapper">
<div class="item-logo"><img src="http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Face-9.jpg" /></div>
    <div class="item-move0">No Move</div> 
    <div class="item-move1">No Move</div>
    <div class="item-move2">No Move</div> 
    <div class="item-move3">Move Me</div>
</div>
<div class="wrapper">
        <div class="item-logo"><img src="http://www.glitters20.com/wp-content/uploads/2012/11/Funny-Face-9.jpg" /></div>
    <div class="item-move0">No Move</div> 
    <div class="item-move1">No Move</div>
    <div class="item-move2">No Move</div> 
    <div class="item-move3">Move Me</div>
</div>


$(".item-logo").mouseover(function() {
    // Set the effect type
    var effect = "slide";

    // Set the options for the effect type chosen
    var options = { direction: "left" };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;
    $(this).parent().find('.item-move3').toggle(effect, options, duration);

  }).mouseout(function(){
      $(this).parent().find('.item-move3').hide('slide',{direction:'left'});
});

jquery将脚本应用于页面上的所有div

2 个答案: