Question

我对jQuery有点新鲜，我被指派为我的男朋友做这件小事。但说实话，我被卡住了！我正在使用.join()和.each()，以便我可以循环遍历.joined数组，但由于某种原因它会在第一个障碍x值上停止，即使它没有触及？

function collides(a, b) {
    var aTop = a.offset().top;
    var aLeft = a.offset().left;
    var bTop = b.offset().top;
    var bLeft = b.offset().left;

    return !(((aTop + a.height()) < (bTop))
    || (aTop > (bTop + b.height()))
    || ((aLeft + a.width()) < bLeft)
    || (aLeft > (bLeft + b.width())));
}
var myArrayOne = ["#secondObs", "#firstObs", "#thirdObs"];
var ObstacleLvlOne = $(myArrayOne.join(', '));

//colliding stuff and response.
function handleCollisions() {
    $.each(ObstacleLvlOne, function (myArrayOne) {
        if (collides($(this), $('#player'))) {
            $('#levelOne').stop();

            $('#player').css('border', 'solid 1px yellow');
        }
    });

link：http://jsfiddle.net/38bod36e/69/

Answer 1

我想你想要这样的东西，我不明白为什么你需要加入阵列

$.each( myArrayOne, function(index,value) {
       console.log(index,value); //0,1,2  "#secondObs", "#firstObs" , "#thirdObs"
if (collides($(value), $('#player'))) {
          $('#levelOne').stop();
          $('#player').css('border', 'solid 1px yellow');
      }
});

Answer 2

根据其他答案的建议，首先更新$ .each用法：

$.each(myArrayOne, function (index, value) {
    var $player = $('#player');

    if (collides($(value), $player)) {
        $('#levelOne').stop();
        $player.css('border', 'solid 1px yellow');
    }
});

然后在尝试检查与它们的碰撞之前确保所有障碍物都存在。您的代码正在寻找#thirdObs，但您提供的jsfiddle（http://jsfiddle.net/38bod36e/70/）未定义其位置和大小，请尝试从数组中删除它，直到您为其编写css。

这就是它的工作原理：http://jsfiddle.net/38bod36e/72/

Answer 3

不需要以这种方式使用each和jQuery选择器。只需按$获取元素，然后按each方法循环显示它们：

$("#secondObs, #firstObs, #thirdObs").each(function () {
    if (collides($(this), $('#player'))) {
        $('#levelOne').stop();
        $('#player').css('border', 'solid 1px yellow');
    }
});

Javascript / JQuery。没有做我想做的事

3 个答案: