动态地将一个div转换为一个按钮 [英] Turn a div into a button dynamically
问题描述
我似乎没有找到任何方法来解决这个问题..所以我想即时通讯需要一些帮助..
im使一个phonegap应用程序,其中我有一个sqlite数据库。我执行一个查询和从数据库中获得一个动态创建的div的结果,事情是,我想为每个记录,我解压缩,使包含它的div,作为一个可编辑角色的按钮..
$例如b $ b
可以说我有一个带有这些列的数据库id option1 option2,我有三个记录..
这意味着我将有三个div
i想要每个div都是一个按钮,以便如果用户点击它可以执行删除(或编辑/更新)查询而不担心id
,例如,如果他选择div2,则执行查询以删除第二条记录。
我的代码到目前为止。
for(var i = 0; i< len; i ++){
var test1 = results.rows.item(i).option1;
var d = new Date();
d.setTime(results.rows.item(i).date);
var newLI = document.createElement(LI);
newLI.className = lt;
newLI.id = results.rows.item(i).id;
var container =(< div id = \+ results.rows.item(i).id +\class = \test\>< div id = \text \> option1< / div>< div id = \data \>+ test1 +< / div>< / div>);
newLI.innerHTML = cont;
var gl = document.getElementById(sqltest);
gl.appendChild(newLI);
}
for(var i = 0; i< len; i ++){
var divid =#+ results.rows.item(i).id; (click,function(){
alert(divid);
})
}
< ul ID = sqltest语句 >< / UL>
上面代码的问题是,虽然每个div都得到正确的ID,但当我点击它时,我总是得到相同的结果,例如#1,尽管我可能有3个div ..
而不是结果
div1 alert#1 div2 alert#2
我得到
div1警报#1 div2警报#1
<我已经使用alert来简化它,而不是提示,从SQLDB将会有 DELETE WHERE id = results.rows.item(i).id;
由于JavaScript范围和闭包的工作方式,您总是会检索相同的'divid'变量。这是一个非常常见的错误。你可以googlejavascript closure臭名昭着的循环来获得更多关于这个的信息。
你应该用替换:
pre $ code $ for(var i = 0; i< len; i ++){
(function(){
var divid =#+ results.rows.item(i).id;
$(divid).on(click,function(){
alert(divid);
});
})();
}
这样,变量 divid 被声明为不同的范围每次。
我不明白这是你遇到的唯一问题。
i don't seem to find any way to work this out..so i guess i m going to need some help.. i m making a phonegap application in which i have an sqlite database.I perform a query and get the results in a dynamically created div from the database, the thing is that i want for each record that i extract to make the div that contains it, as a button with an editable role..
for instance lets say that i have a db with these columns id option1 option2 and i have three records.. this means that i will have three divs i want, each div to be a button so that if user clicks on it to be able to perform a delete (or edit/update) query without being worried about id for instance, if he selects div2 do perform a query that will delete second record..
my code so far..
for (var i = 0; i < len; i++) {
var test1 = results.rows.item(i).option1;
var d = new Date();
d.setTime(results.rows.item(i).date);
var newLI = document.createElement("LI");
newLI.className = lt;
newLI.id = results.rows.item(i).id;
var container = ("<div id=\"" + results.rows.item(i).id + "\" class=\"test\"><div id=\"text\">option1</div><div id=\"data\">" + test1 + "</div></div>");
newLI.innerHTML = cont;
var gl = document.getElementById("sqltest");
gl.appendChild(newLI);
}
for (var i = 0; i < len; i++) {
var divid = "#" + results.rows.item(i).id;
$(divid).on("click", function () {
alert(divid);
})
}
<ul id="sqltest"></ul>
problem with above code, is that although each div gets the correct id, when i click on it, i always get the same result for instance #1 although i may have 3 divs.. instead of having as a result
div1 alert #1 div2 alert #2
i get
div1 alert #1 div2 alert#1
I've used alert just to simplify it, instead of alert there will be DELETE from SQLDB WHERE id=results.rows.item(i).id;
You are retreiving always the same 'divid' variable, because of the way javascript scope and closures work. This is a very common mistake. You can google "javascript closure infamous loop" to get more information about this.
You should replace your for with this:
for (var i = 0; i < len; i++) {
(function () {
var divid = "#" + results.rows.item(i).id;
$(divid).on("click", function () {
alert(divid);
});
})();
}
That way, the variable divid is declared in different scopes each time.
I didn't understand if that is the only problem you are having.
这篇关于动态地将一个div转换为一个按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!