0

所以我正在努力创建一个允许用户为网站创建前端主题的网络应用程序；我这样做主要是为了提高我的 JS 技能。

我在下面的代码中所做的是创建跨越页面宽度的“框”，我希望允许用户编辑每个单独的框。

我面临的问题是我可以选择用户单击的类/ID以及我为用户想要的所有元素设置的div；但是我似乎无法将任何 DOM 方法附加到对象上。

错误未捕获 TypeError: Object editBoxes has no method 'innerHTML' 其中 'innerHTML' 可以是任何方法。我也尝试过 Jquery 的 .html，结果相同。

     for(i=1; i <= boxes; i++) {
                    box.innerHTML = box.innerHTML + [
                    "<div class = 'globalBox' id = 'box"+i+"'>",
                    "<div class = 'editDyBox'>edit this box <div class = 'editBoxes'></div<!--end edit boxes--></div>",
                    "</div><!--end box-->",   
                        ].join('');
                    }//end for
                 $(".globalBox").css("width", width+"%");

                     $(".editDyBox").click(function(){
                       var parentClass = $(this).parent().attr("id");
                       var childClass = $(this).children().attr("class");
                       var customEdit = $(this).attr("class");
                       var editBoxForm = "<form class = 'editBoxForm'><input type = 'text' name = '"+parent+"' width = '100%'></form>";

                       childClass.innerHTML("hello")
                    });//end editdybox click

谢谢-艺术

4

4 回答 4

0

你为什么不使用contenteditable而不是你的复杂代码？它就是为此而设计的。

看看这个演示

<div contenteditable="true">I'm the content</div>

所有浏览器都支持它（是的，甚至 IE5）

它是一个普通的 div，所以它跨越了所有可用的宽度，并且他的内容是可编辑的。没有 JS 或 CSS nedded。

于 2013-10-07T14:09:39.467 回答
0

此行返回一个字符串，而不是一个 jQuery 对象

var childClass = $(this).children().attr("class");

所以你的变量 childClass 将只是一个简单的字符串对象。它永远不会有方法innerHTML。

此外，这将仅返回第一个孩子的类值，而不是类值数组。

于 2013-10-07T14:12:46.000 回答
0

每个元素使用一个点击处理程序怎么样？

var boxes = 3;
var $boxes = $("#boxes");

$.each(new Array(boxes), function () {

    var box = $("<div/>").appendTo($boxes),
        editBox = $("<div/>").text("edit this box").appendTo(box),
        editBoxForm = $("<div/>").appendTo(editBox);

    editBox.click(function () {
        editBoxForm.html("hello");
    });

});

jsFiddle 演示

于 2013-10-07T14:17:56.567 回答
-1

删除这个

childClass.innerHTML("hello")

这样

$(this).children().innerHTML("hello");
于 2013-10-07T14:03:06.697 回答