Question

我在这里有一个网站，用户可以点击某些div。然后我使用以下代码添加“X”：

function addEx( elem, insertClass ) {
        var element = $( elem );
        var newInsertClass = insertClass.replace('.', '');
        var insert = "<span class='" + newInsertClass + "'> X </span>";

        element.click(function(){
            var $this = $(this);

            if( $this.text().indexOf( "X" ) >= 0 ) {
                var id = $this.attr( "id" );
                $( "#" + id + " " + insertClass ).remove();
            } else {
                $this.append( insert );
            }   
        })
    }

如您所见，如果“X”已经存在，我将其删除。如果它不存在，我添加它。这很好。

用户还可以单击“获取结果”按钮。然后将用户点击的div与正确的答案进行比较。根据这个，我添加了正确点击，太多或忘记点击的div的类。这也有效，但内容（“X”）会丢失。所以我可以看到我为这些类提供的CSS-stlying，但是在用克隆替换原始文件后，div中的“X”丢失了。为了添加类，我使用以下代码：

var test = $(".test");
var clone = test.clone(true,true);


function correction() {
    clone.children().filter(function() {
        return $.inArray('#' + this.id, forgotten) != -1;
    }).addClass("forgotten").end().filter(function() {
         return $.inArray('#' + this.id, toomuch) != -1;
    }).addClass("toomuch").end().filter(function() {
         return $.inArray('#' + this.id, correct) != -1;
    }).addClass("right");

   test.replaceWith(clone);                   
 }

我在这里克隆元素，然后在克隆上添加适当的类，并用克隆替换原始文件。

所以我的问题是：如何防止内容丢失？我猜是因为“X”是动态添加的？或者我还有一个带有.test的元素 - 这可能是原因吗？

Answer 1

John Resig 使用jQuery回答了有关克隆对象的question。它可能对你有帮助

jQuery / JavaScript：使用动态添加内容进行克隆

1 个答案: