jquery - 使用 jQuery 更改 div 单击时最接近的文本区域值

Question

我在做什么

• 目前我有一个包含多个输入和一个文本区域的表单。
• 在文本区域上方有一个名为表情符号的 div
• 此 div 包含可点击的表情符号

HTML

<form>
    <input name="example-1" type="hidden" value="spongebob" />
    <input name="example-2" type="hidden" value="gary"  />

    <div id="smilies">
        <div id="smilies-box">
            <img src="http://example.com/smilies/smile.gif" title=":)" />
        </div>
    </div>

    <textarea name="example-3"></textarea>

    <button>Post</button>
</form>

我正在尝试做什么

我的目标是，当点击#smilies-box中的任何图像时，将该图像的标题插入到正下方的textarea中。

目前我正在尝试以下 jQuery，但它没有找到 textarea？

jQuery

$(document).on("click", "#smilies-box img", function(){
    $(this).closest("textarea").val($(this).attr("title"));
});

我做错了什么？

Answer 1

closest() 用于在 DOM 层次结构中向上，而不是跨越或绕过。您可能会寻找的是 nextUntil()与 .parent()

结合

如果你想变得非常奇特，你也许可以得到这样的东西来为你工作:

$(document).on("click", "#smilies-box img", function(){
    $(this).closest(":has(textarea)").children().has(this).nextUntil('textarea').val($(this).attr("title"));
});