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)事件(这意味着之前创建的鱼会绑定(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