javascript - 如何防止停鱼随机反转并且发生在不止一条鱼上

Question

在这段代码中，鱼是随机创建的，具有唯一 ID fish1、fish2 等。如果我创建多于一条鱼，那么鱼会随机反向.

我认为问题出在 if 条件上，我已经尝试了很多次。任何人都可以提出解决方案吗？

$(document).ready(function(e) {
var newfishid = 1;
$('.post-button').on("click", function(e) {
    var row = "";
    row = "<div class='large-fish fish' id='fish" + newfishid + "'>";
    row += "<input type='button' value='Click me to view the problem' class='fish-hover-box' />";
    row += " </div>"
    $('#container').append(row);
    newfishid++;
    $('.fish').on("mouseenter", function(e) {
        $(this).addClass("HoverFish");
        $(this).stop(true);
    }).on("mouseleave", function(){
        $(this).removeClass("HoverFish");
        AnimateFish();
    });        
    $('#categories-select').hide();
    AnimateFish();
});

function AnimateFish() {
    var Fish3 = $("[id^=fish]").not(".HoverFish"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - Fish3.width() - 50,
        maxTop = theContainer.height() - Fish3.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop) + 100,
        imgRight = "Assets/fish-glow3-right.gif",
        imgLeft = "Assets/fish-glow3.gif";
    if ($("[id^=fish]").position().left >= leftPos) {
        $(this).css("background-image", 'url("' + imgRight + '")');
    } else {
        $(this).css("background-image", 'url("' + imgLeft + '")');
    }
    Fish3.animate({
        "left": leftPos,
        "top": topPos
    }, 1800, AnimateFish);
}

Answer 1

我认为您遇到的主要问题是，每次您使用 jQuery 访问 fishes 时，您都在访问它们:

• $('.fish').on 你在所有的鱼上绑定(bind)事件(这意味着之前创建的鱼多次)
• Fish3 = $("[id^=fish]").not(".HoverFish") 和 Fish3.animate 你正在更新所有的动画每次调用 AnimateFish 时鱼。 (每一条鱼的动画结束，所有鱼的动画都更新)
• $("[id^=fish]").position().left 您正在根据在 DOM 中找到的第一条鱼的位置更新鱼的 css(首先创建鱼)，而不是当前的鱼。

我在你的代码中做了一些清理以独立处理每条鱼:

var newfishid = 1;
var $container = $('#container');
$('.post-button').on("click", function(e) {
    var fishHtml = "<div class='large-fish fish fa' id='fish" + newfishid + "'>";
    //fishHtml += "<input type='button' value='Click me to view the problem' class='fish-hover-box' />";
    fishHtml += " </div>";
    var $fish = $(fishHtml).appendTo($container);
    newfishid++;
    $fish.on("mouseenter", function(e) {
        $(this).addClass("HoverFish");
        updateFishAnimation($fish);
    }).on("mouseleave", function(){
        $(this).removeClass("HoverFish");
        updateFishAnimation($fish);
    });
    $('#categories-select').hide();
    updateFishAnimation($fish);
});

function updateFishAnimation($fish) {
    $fish.stop();
    if($fish.hasClass('HoverFish')) {
        return;
    }
    var maxLeft = $container.width() - $fish.width() - 50,
        maxTop = $container.height() - $fish.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop) + 100,
        imgRight = "Assets/fish-glow3-right.gif",
        imgLeft = "Assets/fish-glow3.gif";
    if ($fish.position().left >= leftPos) {
        //PUT WHAT YOU NEED $fish.addClass('fa-arrow-left').removeClass('fa-arrow-right');
    } else {
        //PUT WHAT YOU NEED $fish.addClass('fa-arrow-right').removeClass('fa-arrow-left');
    }
    $fish.animate({
        "left": leftPos,
        "top": topPos
    }, 1800, $.proxy(updateFishAnimation, null, $fish));
}

Fiddle example