Javascript 带有.data和html5数据属性的jQuery自定义函数
我试图在单击按钮时将新的“应用程序”附加到我的“应用程序列表” JSJavascript 带有.data和html5数据属性的jQuery自定义函数,javascript,jquery,html,onclick,append,Javascript,Jquery,Html,Onclick,Append,我试图在单击按钮时将新的“应用程序”附加到我的“应用程序列表” JS $(".appCreate" ).click(newApp); function newApp() { var facebookTemp = $("#facebook-template").html(); var appName = $(this).data("appName"); var appSize = $(this).data("appSize"); var appTemp = $(
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appName");
var appSize = $(this).data("appSize");
var appTemp = $(this).data("appTemp");
$("<div class=\"app" + appName + appSize + "\"></div>").html(appTemp).appendTo(".AppList");
};
#facebook-template {
display: none;
}
.facebook {
background:linear-gradient(to bottom, #133783 0px, #102E6D 100%) repeat scroll 0 0 #133783;
}
.facebook { top:120px; left:0; }
#AppBox {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:0;
}
.AppList {
position:absolute;
height:100%;
width:100%;
margin:0;
padding:0;
}
.App {
position:absolute;
display:block;
margin:5px;
padding:0;
box-shadow:0 0 5px 1px black;
color:#FFFFFF;
cursor:move;
}
.Size170x290 {height:170px;width:290px;}
基本上,这个东西没有显示出来,我不知道是什么原因造成的。您丢失了单击处理程序的上下文 这显然是第一个错误:
$(".appCreate" ).click(newApp);
第二个错误是数据名。改为:
var appName = $(this).data("appname");
注意这个例子。将所有名称转换为小写
由于评论中的对话,我还添加了handlebar.js
新工作守则:
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appname");
var appSize = $(this).data("appsize");
var appTemp = $(this).data("apptemp");
var template = Handlebars.compile(facebookTemp);
var html = template({
app : appName,
facebook : appTemp,
size : appSize
});
$(".AppList").append(html);
};
Live。您丢失了单击处理程序的上下文 这显然是第一个错误:
$(".appCreate" ).click(newApp);
第二个错误是数据名。改为:
var appName = $(this).data("appname");
注意这个例子。将所有名称转换为小写
由于评论中的对话,我还添加了handlebar.js
新工作守则:
$(".appCreate" ).click(newApp);
function newApp() {
var facebookTemp = $("#facebook-template").html();
var appName = $(this).data("appname");
var appSize = $(this).data("appsize");
var appTemp = $(this).data("apptemp");
var template = Handlebars.compile(facebookTemp);
var html = template({
app : appName,
facebook : appTemp,
size : appSize
});
$(".AppList").append(html);
};
现场直播。我希望通过投票,要求人们发表评论。您提供了代码。html中的
.AppList
在哪里?html中是否有类为AppList的元素?似乎没有。很抱歉,我出于某种原因漏掉了:Z@MarcelGwerder我已经更新了问题,将代码的其余部分包括在内。我希望否决要求人们留下评论的投票。您提供了代码。html中的.AppList
在哪里?html中是否有类为AppList的元素?似乎没有。很抱歉,我出于某种原因漏掉了:Z@MarcelGwerder我已经更新了这个问题以包含其余的代码。单击功能仍然有效,但这是一种更好的方法。但这并没有解决我的问题。我现在会添加更多的HTML代码谢谢你的回答:)编辑了这篇文章来解决其他问题。德国劳埃德船级社:)如果这不是你的意思,请纠正我。将.html(appTemp)更改为.html(facebookTemp)。您可能应该使用handelbars.js之类的模板引擎来替换模板值。或者你现在可以用jQuery更改值。类似于我在Handlebars库中包含的注意事项。单击功能仍然有效,但这是一种更好的方法。但这并没有解决我的问题。我现在会添加更多的HTML代码谢谢你的回答:)编辑了这篇文章来解决其他问题。德国劳埃德船级社:)如果这不是你的意思,请纠正我。将.html(appTemp)更改为.html(facebookTemp)。您可能应该使用handelbars.js之类的模板引擎来替换模板值。或者,您现在可以使用jQuery更改值,类似于我在Handlebars库中包含的注意事项。