单击按钮时保存div元素的样式

Question

我在我的网站上做了一个实用程序，人们可以在其中配置他们的活动计划，在中，用户点击一些按钮就会创建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元素的样式。这在一段时间前是有效的，但现在相同的功能不起作用了。

可能是什么问题？

Fiddle：http://jsfiddle.net/2tzkj7nr/1/

Answer 1

我检查了JSFiddle和浏览器JavaScript控制台，声明如下：

ReferenceError: label is not defined

所以我注意到您还没有初始化标签变量。因此，您删除标签部分或创建标签变量

....componentClass + "Label :" + label);

或

var label = ...

为了获得我使用的输入字段的值：

var label = $(".clickedit").val();