使用元素 ID 更新 javascript 函数中的参数
Posted
技术标签:
【中文标题】使用元素 ID 更新 javascript 函数中的参数【英文标题】：Updating parameters in a javascript function using element ID 【发布时间】：2017-11-10 21:17:01 【问题描述】：我正在尝试根据元素 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;
【问题讨论】：
我猜tasks.push应该推送一个对象而不是字符串。尝试删除“” 你将一堆字符串推送到tasks jquery 代码不执行
@Programmer1228 它应该是 tasks.push($("#" + task[i].id)) 在你的循环中像这样
第一个：function_ 是什么？？
谢谢@daremachine 和@Nirus！删除“”返回正确的字符串。我已经更新了原帖。即使“返回任务”，function_ 仍然没有返回值； console.log 中的输出与原始参数 $('#task1'),$('#task2'),$('#task3'),$('#task4') 相同。想法？
【参考方案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);
【讨论】：
感谢您的帮助。不幸的是，为“function_”返回的数组没有正确传递——即使 console.log 显示该数组是相同的。我会尝试设置一个测试页面来显示更多代码。【参考方案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>【讨论】：
感谢您的帮助 - 以及最佳实践的指导。我是初学者，所以任何提示都会有很大帮助。即使通过实现您提出的代码，“function_”的参数也不起作用。 “function_”有点长-我会尝试设置一个测试文件以供参考。 @Programmer1228 iffunction_($('#task1'), $('#task2'), $('#task3'),$('#task4')) 如您所说，此代码适用于您.. 所以我的代码应该可以工作.. 如果不是，请使用function_ 函数编辑您的问题
我为“function_”添加了函数（我承认这是一个可怕的名字）。我已经把它改成了“collision_”。
@Programmer1228 使用演示更新了答案。我更改了arguments.length 并使用collision_(objArr) 并更改了.each() 函数中的js 以获取对象数组。查看演示并尝试代码和让我知道发生了什么？
@Programmer1228 我添加了一个删除按钮..您可以将元素删除为只有一个，您将返回false以上是关于使用元素 ID 更新 javascript 函数中的参数的主要内容，如果未能解决你的问题，请参考以下文章
如何使 JavaScript 中每个元素的 map 函数的键值递增
JavaScript setInterval 函数不更新 <div> 元素中的 Gridview