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元素的样式。这是前段时间工作的，但现在相同的功能无效。

可能是什么问题？

小提琴：http://jsfiddle.net/2tzkj7nr/1/

Answer 1

我检查了JSFiddle，浏览器JavaScript控制台声明了以下内容：

ReferenceError: label is not defined

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

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

或

var label = ...

获取我使用的输入字段的值：

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

保存div元素的样式onClick按钮

1 个答案: