我在我的网站上制作了一个实用工具,人们可以在其中配置他们的活动计划,用户将在点击某些按钮时创建div
。div将有一个可编辑的标签创建( courtsey:http://jsfiddle.net/alforno/4A9N8/)
HTML:
<div class="row" style="float: left; position: relative">
<button type="button" class="btn btn-success square">Table</button>
<button type="button" class="btn btn-primary circle">RoundTable</button>
<button type="button" class="btn btn-primary square">Stage</button>
</div>
<br />
<br />
<div class="row">
<div class="box" style="border: double; min-height: 500px; min-width: 600px"></div>
<input type="button" class="btn btn-1a btn-warning btnSaveStyle" value="Save Style" />
</div>
剧本:
<script type="text/javascript">
$(function () {
$(".square").click(function () {
$(".box").append("<div style='text-align:center' class='comp1'><label class='label1' style='position:relative;top:30px'>edit text</label><input class='clickedit' type='text' style='width:25px' /></div>");
$(".box .comp1").resizable({ containment: ".box" });
$(".box .comp1").draggable({ containment: ".box" });
var defaultText = 'edit text';
function endEdit(e) {
var input = $(e.target),
label = input && input.prev();
label.text(input.val() === '' ? defaultText : input.val());
input.hide();
label.show();
}
$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
endEdit(e);
return false;
} else {
return true;
}
})
.prev().click(function () {
$(this).hide();
$(this).next().show().focus();
});
});
$(".circle").click(function () {
$(".box").append("<div class='comp2'></div>");
$(".box .comp2").resizable({ containment: ".box" });
$(".box .comp2").draggable({ containment: ".box" });
});
});
//save style script :
$(".btnSaveStyle").click(function () {
alert(2);
$(".box").children(".comp1").each(function () {
alert(1);
var style = $(this).attr('style');
var componentClass = $(this).attr('class');
alert("Style Comp1 : " + style + "#\n" + "Class Comp1 :" + componentClass + "Label :" + label);
});
$(".box").children(".comp2").each(function () {
var style2 = $(this).attr('style');
var componentClass2 = $(this).attr('class');
alert("Style Comp2 : " + style2 + "#" + "Class Comp2 :" + componentClass2);
});
});
</script>
点击Save Style
按钮,我需要保存各个div元素的样式。这是前段时间工作的,但现在相同的功能无效。
可能是什么问题?
答案 0 :(得分:0)
我检查了JSFiddle,浏览器JavaScript控制台声明了以下内容:
ReferenceError: label is not defined
所以我注意到你还没有初始化一个标签变量。因此,您删除标签部分或创建标签变量
....componentClass + "Label :" + label);
或
var label = ...
获取我使用的输入字段的值:
var label = $(".clickedit").val();