在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.