Question

点击它我的页面中有一个帖子按钮我得到一个随机移动的鱼<div>组件。我想创建一个通用代码，以便在点击post按钮时创建的许多鱼类使用通用代码随机移动，以提高效率。

你能不能帮我开发一个代码，为多条鱼动态动画我的鱼。可重复使用的代码是我正在寻找的。

<section class="main-content" id="container">
    <input type="button" value="Post" class="post-button" /> 
    <img src="Assets/Arrow.png" class="right-arrow" alt="arrow" id="rightarrow" /> 
</section>

$('.post-button').on('click',function(e){
    $('#rightarrow').after('<div class="fishhatch" ></div>');//new fish created
    animatenewfish();//animation to move the fish randomly in my container
});

/*Aniamting the fish*/  
function animatenewfish() {
    var Fishv1 = $(".fishhatch"),
    theContainer = $("#container"),
    maxLeft = theContainer.width() - Fishv1.width()-100,
    maxTop = theContainer.height() - Fishv1.height()-100,
    leftPos = Math.floor(Math.random() * maxLeft),
    topPos = Math.floor(Math.random() * maxTop)+100,
    imgRight = "Assets/R1gif.gif",
    imgLeft = "Assets/FIsh1.gif";

    if (Fishv1.position().left < leftPos) {
        Fishv1.css("background-image",'url("' + imgRight + '")');
    }
    else {
        Fishv1.css("background-image",'url("' + imgLeft + '")');
    }

    Fishv1.animate({
        "left": leftPos,
        "top": topPos
    }, 18000, animatenewfish);
}

Answer 1

$('.post-button').on('click',function(e){
    var new_fish = $('<div class="fishhatch" ></div>').insertAfter($('#rightarrow'));
    animatenewfish(new_fish);
});

function animatenewfish(fish) {
    var Fishv1 = fish,
    theContainer = $("#container"),
    maxLeft = theContainer.width() - Fishv1.width()-100,
    maxTop = theContainer.height() - Fishv1.height()-100,
    leftPos = Math.floor(Math.random() * maxLeft),
    topPos = Math.floor(Math.random() * maxTop)+100,
    imgRight = "Assets/R1gif.gif",
    imgLeft = "Assets/FIsh1.gif";

    if (Fishv1.position().left < leftPos) {
        Fishv1.css("background-image",'url("' + imgRight + '")');
    }
    else {
        Fishv1.css("background-image",'url("' + imgLeft + '")');
    }

    Fishv1.animate({
        "left": leftPos,
        "top": topPos
    }, 18000, function(){animatenewfish(Fishv1)});
}

像这样的事情。每次单击按钮时，都会插入一条新鱼并设置动画

如何为动态创建的不同组件重用相同的代码？

1 个答案: