我在这里有一个站点,用户可以在其中单击一些 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
- 这可能是原因吗?