Question

我正在制定发票系统，而且我已经参与了订单项目。

为此，我有一个表，最终会有一个按钮，可以动态地向DOM添加另一个订单项。

在此之前，我正在努力解决单个订单项中的问题。就我而言，它是笔记部分。

对于音符的输入，我有一个带有一些文本的P标签，并且该元素的onclick将其替换为textarea。

<h2>line items</h2><hr>
    <table id='lineitems'>
        <tr>
            <th>Order #</th>
            <th>Style #</th>
            <th>Item Name/Description</th>
            <th>Quantity</th>
            <th>Cost</th>
        </tr>
        <tr>
            <td><input type='text' name='ladingnum' /></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' style='width:300px;'/></td>
            <td><input type='text' name='invoicenum' /></td>
            <td><input type='text' name='invoicenum' /></td>    
        </tr><tr><td colspan=4>
            <div id='thenotes'>
                <input type='hidden' class='comments' name='notes'/>
                <textarea class='comments'></textarea>
                <p class='edit'>[ click here to add notes ]</p>
            </div>
        </td></tr>

    </table>

这是我正在使用的jQuery。

$(document).on('click', '.edit', function() {
    var odata = $(this).closest("input:hidden").val();
    if( odata == undefined ) odata = '';
    $(this).closest("textarea.comments").val(odata).focus();
});

$(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if( idata == '' ) idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>"+idata+"</p>");
});

使用它，我得到了这个效果。

页面加载... P标记的默认内容是单击此处添加注释。点击它会变成一个textarea，其中包含隐藏字段中的内容。它也应该专注于这个新创建的textarea ....它没有专注！

最重要的是。我似乎无法获得textarea的值进入隐藏的输入字段......我做错了什么？

Answer 1

选择器.closest('input:hidden')只会选择它最接近的父级，而不是兄弟级。您必须使用.siblings('input:hidden')或.closest('div').find('input:hidden')来选择输入和文本区域。

这样的事情：

演示here

$(function () {
    $(document).on('click', '.edit', function () {
        var odata = $(this).closest("div").find("input:hidden").val();
        if (odata == undefined) odata = '';
        $(this).closest("div").find("textarea.comments").val(odata).focus();
    });

    $(document).on('focusout', '.liveedit', function () {
        var idata = $(this).val();
        if (idata == '') idata = "[ click here to add notes ]";
        $(this).prevAll("input:hidden").val(idata);
        $(this).replaceWith("<p class='edit'>" + idata + "</p>");
    });
});

Answer 2

使用siblings代替closest。试试这个：

 $(document).on('click', '.edit', function() {
var odata = $(this).siblings("input[type='hidden']").val();
if( odata == undefined ) odata = '';
$(this).siblings("textarea.comments").val(odata).focus();
});

Answer 3

隐藏的<input>和<p>标记是兄弟姐妹，因此您应该选择siblings()选择器。 closest()用于遍历元素的祖先，直到找到匹配选择器。您也没有在代码上创建任何<textarea>，但我认为这是'.liveedit'的用途：

$(document).on('click', '.edit', function () {
    var odata = $(this).siblings("input:hidden").val();
    if (odata == undefined) odata = '';
    var textarea = $('<textarea class="liveedit">' + odata + '</textarea>');
    $(this).replaceWith(textarea);
    textarea.focus();
});

$(document).on('focusout', '.liveedit', function () {
    var idata = $(this).val();
    if (idata == '') idata = "[ click here to add notes ]";
    $(this).siblings("input:hidden").val(idata);
    $(this).replaceWith("<p class='edit'>" + idata + "</p>");
});

请参阅此jsfiddle：http://jsfiddle.net/yKym7/1/

在replaceWith之后设置焦点

3 个答案: