保留一些html元素而不替换新的相同html元素

我有我的li中的复选框，我希望li可以被dlbclick编辑，但它会删除checbox。我可以将复选框与我的文本值一起包含，但我不想这样做，还有其他方式吗？保留一些html元素而不替换新的相同html元素

$(document).on('dblclick', '#li', function() { 
    oriVal = $(this).text(); 
    $(this).text(""); 
    input = $("<input type='text' id='input'>"); 
    input.appendTo($(this)).focus(); 

}); 

$(document).on('focusout', '#input', function() { 
    if ($(this).val() != "") { 
     newInput = $(this).val(); 
     $(this).hide(); 
     $(this).closest('li').text(newInput); 
    } else { 
     $(this).closest('li').text(oriVal); 
    } 

});

HTML

<ul> 
    <li id="li"> 
     <input type="checkbox" name="1" value="1">item 1</li> 
    <li id="li"> 
     <input type="checkbox" name="2" value="2">item 2</li> 
</ul>

来源

2013-10-12 Hildy Maass

见

<ul> 
    <li class="li"> 
     <input type="checkbox" name="1" value="1"/><span>item 1</span> 
    </li> 
    <li class="li"> 
     <input type="checkbox" name="2" value="2"/><span>item 2</span> 
    </li> 
</ul>

和

$(document).on('dblclick', '.li', function() { 
    var $this = $(this), 
     text = $.trim($this.text()); 
    $this.data('text', text); 
    $("<input />", { 
     value: text, 
      'class': 'edit' 
    }).appendTo($(this).find('span').empty()).focus(); 
    $this.find('input[type="checkbox"]').hide(); 
}); 

$(document).on('focusout', '.edit', function() { 
    var value = $.trim(this.value), 
     $li = $(this).closest('li'); 
    $li.find('span').text(value == '' ? $li.data('text') : value) 
    $li.find('input[type="checkbox"]').show(); 
});

演示：Fiddle

既然你用id li多个元素不使用id属性，使用类，而不是因为元素的ID必须是唯一的一个文件

来源

2013-10-12 04:09:42

thx这么多！ var value = $ .trim（this.value），为什么在这里你用这个而不是$（this）？和逗号而不是; ?? –

@HildyMaass，因为它是一个输入字段，您可以从dom引用本身访问该值，因此不需要使用[$（this）.val（）]（http://api.jquery.com/val/）这里 –

@HildyMaass为了使用[var]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var）来声明多个变量，你可以使用'，' –

检查：

http://jsfiddle.net/64V4p/4/

只需takte的 '礼' 之外的复选框。然后，您可以使用CSS来安排与您的文本相符的复选框。

<ul> 
    <input type="checkbox" name="1" value="1"><li id="li">item 1</li> 
    <input type="checkbox" name="2" value="2"><li id="li">item 2</li> 
</ul>

来源

2013-10-12 04:03:59

当你编辑li文本时，复选框会消失，我只想编辑li文本而不影响复选框 –

这是否有帮助？ –

不，看看其他答案 –

保留一些html元素而不替换新的相同html元素

回答

相关问题