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

retain some html elements without replace new same html element

本文关键字：元素 HTML 替换 保留      更新时间：2023-09-26

我的li中有复选框，我希望li可以通过dlbclick进行编辑，但它会删除checbox。我可以将复选框与我的文本值一起包含，但我不想这样做，还有其他方式吗？

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

$(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>


<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();
});

演示：小提琴

由于有多个元素的 id li不使用 id 属性，因此请改用 class，因为元素的 ID 在文档中必须是唯一的

检查这个：

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

只需选中"li"外面的复选框即可。然后，您可以使用 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>
相关文章：