Question

我无法使用最接近的img标签附加图片src。

当自动填充选项选择我想填充该行的图像时

HTML：

<td>
    <div>
        <img class="participantphoto" src="images/author2.jpg" width="50" />
        <input placeholder="Type a letter to search students" class="form-control searchStudent formbottom" name="student[0][name]" type="text" autocomplete="off">
    </div>
</td>

JS：

$(document).on("focus keyup", "input.searchStudent", function (event) {
    $(this).autocomplete({
        source: 'gdcontroller.php?action=search',
        select: function (event, ui) {
        console.log(ui);
            event.preventDefault();
            this.value = ui.item.label;
            // line below fails
            $(this).parent().closest( ".participantphoto" ).attr("src",ui.item.profile_pic);
        },
        focus: function (event, ui) {
            event.preventDefault();
            this.value = ui.item.label;
        }

    });
});

Answer 1

这不起作用，因为img .participantphoto不是输入.searchStudent的父级。

您应该使用.closest('div')转到最近的div，然后使用participantphoto找到包含.find(".participantphoto")类的img标记，最后设置属性src：

$(this).closest('div').find(".participantphoto").attr("src",ui.item.profile_pic);

或者您可以改为使用.siblings()：

$(this).siblings(".participantphoto").attr("src",ui.item.profile_pic);

希望这有帮助。

Answer 2

closest从input开始，未找到img，因为img不是祖先 input，它是兄弟姐妹。

由于它是唯一的img兄弟，$(this).siblings("img")找到它：

$(this).siblings( "img" ).attr("src",ui.item.profile_pic);

或者如果你想使用这个类：

$(this).siblings( ".participantphoto" ).attr("src",ui.item.profile_pic);

无法使用最接近的img标记附加图像src

2 个答案: