使用元素 ID 更新 javascript 函数中的参数

Question

我正在尝试根据元素 ID 更新函数的参数。下面的代码按预期工作，因为 ID 参数是硬编码的。

window.setInterval(function() {
    $('#result').text(collision_(
        $('#task1'), $('#task2'), $('#task3'), $('#task4')
    ));
}, 200);

当我尝试动态编译参数时，函数不起作用。

window.setInterval(function() {
    function workerTasks() {
        var task = document.getElementById("worker1").children;
        var tasks = [];
        for (i = 0; i <= task.length - 1; i++) {
            tasks.push($("#" + task[i].id))
        }
        return tasks;
    }

    $('#result').text(collision_(tasks));
}, 200);

任何帮助将不胜感激！

下面的更新代码---------

我将它与可拖动的碰撞函数配对，这些碰撞函数是由真或假响应驱动的 - 但我仍然无法指示来自 'workerTasks' 的数组供 'collision_' 使用。

$(document).ready(function(){
      setInterval(function() {
        $('#result').text(collision_(workerTasks()));
            console.log(tasks);
      }, 200);
    });

    function workerTasks() {
      var tasks = '';
      $('#worker1 [id^=task]').each(function(i){
        var comma = $('#worker1 [id^=task]').length == i ? '' : ',';
        tasks += $('#' + $(this).attr('id'))  + comma;
      });
      return tasks;
    }

                    function collision_() {
                            if (arguments.length > 1) {
                                    for (var x = 0; x < arguments.length; x++) {
                                            for (var y = 1; y < arguments.length; y++) {
                                                    if (x == y) {
                                                            continue;
                                                    }
                                                    if (collision(arguments[x], arguments[y])) {
                                                            return true;
                                                    }
                                            }
                                    }
                                    return false;
                            }
                    }

                    function collision($div1, $div2) {
                        var x1 = $div1.offset().left;
                        var y1 = $div1.offset().top;
                        var h1 = $div1.outerHeight(true);
                        var w1 = $div1.outerWidth(false);
                        var b1 = y1 + h1;
                        var r1 = x1 + w1;
                        var x2 = $div2.offset().left;
                        var y2 = $div2.offset().top;
                        var h2 = $div2.outerHeight(true);
                        var w2 = $div2.outerWidth(false);
                        var b2 = y2 + h2;
                        var r2 = x2 + w2;

                        if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2) return false;
                        return true;
                        }

Answer 1

你的最后一行应该是

$('#result').text(function_(workerTasks()));

还有那个 workerTasks() 函数，我会把它移到你的 setInterval 函数之外。

原来如此

function workerTasks() {
   var task = document.getElementById("worker1").children;
   var tasks = [];
   for (i = 0; i <= task.length - 1; i++) {
       tasks.push($("#" + task[i].id))
   }
   return tasks;
}

window.setInterval(function() {
    $('#result').text(function_(workerTasks()));
}, 200);

Answer 2

好的，我会发布我的答案来解决这个代码问题，即使我认为如果你只显示 function_ 内容就不需要所有这些代码

1st：我不喜欢将 jquery 与纯 js 混合

2nd：function_不接受数组作为参数，没有办法将任务保存为数组

所以你的代码应该是这样的

$(document).ready(function(){        
  setInterval(function() {
    $('#result').text(function_(workerTasks()));
  }, 200);
});
function workerTasks() {
  var tasks = '';
  $('#worker1 [id^=task]').each(function(i){
    var comma = $('#worker1 [id^=task]').length == i ? '' : ',';
    tasks += $('#' + $(this).attr('id'))  + comma;
  });
  return tasks;
}

更新：使用collision 和collision_ 函数编辑问题后.. 见下一个演示

$(document).ready(function(){        
  setInterval(function() {
    $('#result').text(collision_(workerTasks()));
  }, 200);
  
  $('button').on('click' , function(){
    $(this).closest('div').remove();
  });
});
function workerTasks() {
  var tasks = [];
  $('#worker1 [id^=task]').each(function(i){
    tasks.push($('#' + $(this).attr('id')));
  });
  return tasks;
}
function collision_(objArr) {
  if (objArr.length > 1) {
    for (var x = 0; x < objArr.length; x++) {
      for (var y = 1; y < objArr.length; y++) {
        if (x == y) {
           continue;
        }
        if (collision(objArr[x], objArr[y])) {
             return true;
        }
      }
    }
  }else{
    return false;
  }
}


function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(false);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(false);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2){
    return false;
  }else{
    return true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="worker1">
  <div id="task1">Task 1 <button>X</button></div>
  <div id="task2">Task 2 <button>X</button></div>
  <div id="task3">Task 3 <button>X</button></div>
  <div id="task4">Task 4 <button>X</button></div>
</div>
<div id="result"></div>

$(document).ready(function(){        
  setInterval(function() {
    $('#result').text(collision_(workerTasks()));
  }, 200);
  
  $('button').on('click' , function(){
    $(this).closest('div').remove();
  });
});
function workerTasks() {
  var tasks = [];
  $('#worker1 [id^=task]').each(function(i){
    tasks.push('#' + $(this).attr('id'));
  });
  return tasks;
}
function collision_(objArr) {
  if (objArr.length > 1) {
    for (var x = 0; x < objArr.length; x++) {
      for (var y = 1; y < objArr.length; y++) {
        if (x !== y) {
          if (collision(objArr[x], objArr[y])) {
               return true;
          }
        }else{
          return false;
        } 
      }
    }
  }else{
    return false;
  }
}


function collision($div1, $div2) {
  var x1 = $($div1).offset().left;
  var y1 = $($div1).offset().top;
  var h1 = $($div1).outerHeight(true);
  var w1 = $($div1).outerWidth(false);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $($div2).offset().left;
  var y2 = $($div2).offset().top;
  var h2 = $($div2).outerHeight(true);
  var w2 = $($div2).outerWidth(false);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1> r2){
    return false;
  }else{
    return true;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="worker1">
  <div id="task1">Task 1 <button>X</button></div>
  <div id="task2">Task 2 <button>X</button></div>
  <div id="task3">Task 3 <button>X</button></div>
  <div id="task4">Task 4 <button>X</button></div>
</div>
<div id="result"></div>