Question

我有一个包含多个表行的表单（添加了样本表）。

<table>
<tr>
        <td valign="top">Title <span class="asterisk">*</span></td>
        <td>
        <textarea name="title" id="title" rows="2" style="width:100%" class="required show-chracter-count show-field-hint" data-fieldname="title">
        </textarea>
        </td>
    </tr>
<tr>
<td>Almost like the same </td>
</tr>
</table>

我通过在输入的焦点/模糊事件上添加一些html内容来隐藏/显示一些提示文本。

$('.show-field-hint').on('focus', function() {
    get_hints_and_display($(this));
});

$('.show-field-hint').on('blur', function() {
    hide_hints($(this));
});

function get_hints_and_display(thisObj)
{
    var field= thisObj.data('fieldname');
    $.ajax({
        url: '/pathtofile.php?field=' + field,
        type: 'GET',
        success: function(response) {
            if(response)
            {
                var htmlToAppend= $('<div class="hint-div" style="width:100%;clear:both;padding:10px;display:none;">' + response + '</div>');
                var parentTd = thisObj.parent('td');
                if(parentTd.find('div.hint-div').length > 0)
                    parentTd.find('div.hint-div').remove();
                parentTd.append(htmlToAppend);
                parentTd.find('div.hint-div').slideDown();
            }
        }
    })
}

function hide_hints(thisObj)
{
    var hintDiv= thisObj.siblings('div.hint-div');
    hintDiv.slideUp();
    setInterval(function(){remove_hint_div(hintDiv)}, 1000);
}
function remove_hint_div(divObj)
{
    divObj.remove();
}

通过简单的remove()函数删除。但是，只有当用户从当前行上的某个元素上的当前元素点击/模糊时，我才想删除提示部分。无论如何可能吗？

Answer 1

您可以使用focusout javascript event执行此操作。

修改

$( ".myinput" ).focusout(function() { $( this ).parent().children( ".hint-div" ).remove(); });

jsfiddle中的工作示例。

编辑2 ：通过编辑的问题，我理解得更好。关键是不要使用模糊或焦点。但是当新输入获得焦点时删除任何先前的提示。

if(parentTd.find('div.hint-div').length == 0) { // First remove any previously displayed hints. $( '.hint-div' ).each(function() {hide_hints($( this ));}); // Add new-hint for the current box. parentTd.append(htmlToAppend); parentTd.find('div.hint-div').slideDown(); }

我在这里有一个有效的例子： https://jsfiddle.net/Ld4achfh/2/

如何知道它是否未点击同一父级内的任何元素？

1 个答案: