在div中调用javascript函数
[英]call a javascript function inside a div
问题描述
我想创建一个包含几个div的网页，每个div包含具有不同实现的相同绘制函数（如通用接口）。 加载页面后，我想遍历所有div并一个接一个地调用每个绘制函数。
到目前为止，我的页面如下所示：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
draw();
});
});
</script>
<div class="slot" id="slot1">
<script type='text/javascript'>
function draw() {
console.log('Here we draw a circle');
};
</script>
</div>
<div class="slot" id="slot2">
<script type='text/javascript'>
function draw() {
console.log('Here we do something totally different and draw a rectangle');
};
</script>
</div>
</body>
</html>
不幸的是我不知道如何调用所选div“d”的绘制函数。 现在它只调用最后定义的绘图函数。
更新：
请注意，我不能将不同的绘制方法组合成一个可以获得形状参数的方法。绘制方法将完全相互独立。
6 个解决方案
解决方案1
2 2012-10-23 21:17:07
你可以这样称呼它
HTML：
<div class="slot" id="slot1">Draw1</div>
<div class="slot" id="slot2">Draw2</div>
JS：
function draw()
{
console.log('Drawed! '+$(this).attr('id'));
}
$(document).ready( function() {
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
draw.call($(this));
});
});
一个例子 。
解决方案2
2 2012-10-23 21:27:06
你为什么要在div定义脚本？
在一个脚本块中完成所有逻辑：
<head>
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
</head>
<body>
<script type='text/javascript'>
$( document ).ready( function() {
// Draw all slots
$('div.slot').each(function(i, d) {
console.log('slot found: ' + d.id);
// d.draw() does not work
draw();
});
});
function draw(behavior) {
console.log(behavior);
}
</script>
<div class="slot" id="slot1" data-behavior="drew 1">
</div>
<div class="slot" id="slot2" data-behavior="drew 2">
</div>
</body>
</html>
如果你想要做一些更复杂的事情，你应该考虑构建一个面向对象的javascript应用程序，每个块的功能都来自一个类“slot”。
https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript
解决方案3
1 2012-10-23 21:08:00
发生这种情况的原因是因为你一直在覆盖绘图功能。 你为什么没有一个脚本页面，你可以在其中保存一个函数指针数组，如下所示：
var array = (draw1, draw2, draw3, ...);
function draw1()
{
//do your thing on div1
}
...
function drawn()
{
//do your n thing on divn
}
现在为你的第一个div你需要调用draw1，它位于数组的索引1。
HTML：
<div id="draw1">
</div>
....
<div id="drawn">
你觉得怎么样？ 注意sytax尚未经过测试。
解决方案4
1 2014-01-03 14:57:31
在这种情况下，我发现“真正的OOP”的最简单方法是在文档级别上发送所有事件：
创建一个简单的对象并在main和视图中加载此对象，如：
var events = {someCustomEventFromMain:'someCustomEventFromMain', someCustomEventFromView:'someCustomEventFromView'}
现在，您可以使用jQuery触发文档上的事件
$(document).trigger(events.someCustomEventFromMain, somedata);
而你可以从任何视图或div听取
$(document).on(events.someCustomEventFromMain, function(__e, __data){
//___e is the event emitted from __e.target
//__data is the data object you wish to pass with the event
//do something when event occurs
});
因此，如果每个下标在文档级别侦听某些事件，在您的情况下为'drawEvent'，那应该可以解决问题。 您甚至可以在事件数据中传递参数，例如“circle”。 希望这可以帮助。
解决方案5
1 2015-02-26 15:24:22
<html>
<head>
<script>
$(document).ready(
function() {
$('#show').call(callfun());
});
</script>
</head>
<body>
<h:form>
<div id="show" align="center">
<script>
function callfun(){
var data = "hi";
alert(data);
}
</script></div>
</h:form>
</body>
</html>
我认为它可能会奏效。
解决方案6
1 2015-06-07 05:52:43
问题
每次重新定义时，都会覆盖window.draw() 。 您需要为每个命名空间命名（即，将其附加到（否则为空）对象），或者为每个函数指定一个不同的名称。 Javascript中没有“div-scope”;）
解
您可以根据div的id命名每个函数，并使用object["methodName"]()语法动态调用它来调用它。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> </head> <body> <script type='text/javascript'> $( document ).ready( function() { // Draw all slots $('div.slot').each(function(i, d) { console.log('slot found: ' + d.id); // d.draw() does not work window[d.id]; }); }); </script> <div class="slot" id="slot1"> <script type='text/javascript'> function slot1() { console.log('Here we draw a circle'); }; </script> </div> <div class="slot" id="slot2"> <script type='text/javascript'> function slot2() { console.log('Here we do something totally different and draw a rectangle'); }; </script> </div> </body> </html>
如何从div内部调用javascript函数？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.