Question

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

devtools::install_github('jeremystan/tidyjson')

当我尝试动态编译参数时，函数无效。

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

非常感谢任何帮助！

以下更新代码---------

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

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);

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_内容

，我也不会发布所有这些代码，我会发布我的答案来解决此代码问题

第一：我不喜欢将jquery与纯js混合

第二：没有意义将任务保存为数组而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>

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

2 个答案: