javascript - 触发其他子元素时修改子元素

Question

<div class='wrap'>
    <textarea></textarea>
    <a href=''></a>
</div>

<div class='wrap'>
    <textarea></textarea>
    <a href=''></a>
</div>

<div class='wrap'>
    <textarea></textarea>
    <a href=''></a>
</div>

我有很多具有相同子内容的父元素。当一个事件被触发给一个孩子时，对同一个父母的另一个孩子做一些事情。

例如：

< textarea > onkeyup (from parent A) change the background-color of < a > (from parent A)

如何处理？

Answer 1

您正在寻找其中一个siblings（应用于$(this)事件处理程序内），或者可能是closestand的组合find（如果其他元素可能处于不同的级别，在您的示例中不是这种情况）。

示例 - siblings：Live Copy | 来源

$(".wrap textarea").on("keyup", function() {
    var link = $(this).siblings("a");
    link.css("background-color", "green");
});

示例 - closest+ find: Live Copy | 来源

$(".wrap textarea").on("keyup", function() {
    var link = $(this).closest(".wrap").find("a");
    link.css("background-color", "green");
});