jQuery 查找最近的输入 [英] jQuery Find Closest Input

问题描述

我的结构就像每个图像都有下面的输入.我在屏幕上有 x 图像.每个图像都有onlick选项

onclick="imageClicked(this)"

函数创建图像边框并显示折叠的输入.图片边框显示，但输入不可见.

这是函数

function imageClicked(image) {var input = $(image).closest("input");$(image).css('outline', "solid 2px #5bc0de");$(input).css("visibility", "visible");$(input).focus();$(input).focusout(function () {$(image).css('outline', "0");if ($(input).val() === "0") {$(input).css("可见性", "折叠");}});$(image).focusout(function () {if ($(input).val() === "") {$(image).css('outline', "0");}});}

这是 Razor 视图中的 HTML 结构

@for (int i = 0; i  m.Boxes[i].BoxId)<div class="col-md-2"><img src="@imgSrc" width="50%" alt="@Model.Boxes[i].Name" id="@string.Format("image{0}", imageId)" onclick="imageClicked(这个)"/>@Html.TextBoxFor(m => m.Boxes[i].Quantity, new { @class = "form-control", @style = "visibility: collapse; width: 50%; margin-top: 1%",@id = string.Format("input{0}", imageId) })

}

解决方案

Closest 将搜索父元素.这里的输入不是图像的父元素.它只是一个兄弟姐妹.为此，您可以使用siblings() 选择器.

var input = $(image).siblings("input");

或者你可以使用，

var input = $(image).closest(".col-md-2").find("input");

• 获取父div(因为图像和输入在同一个父级下)
• 然后找到该父级的子输入

I have structure like each image has input below. I have x images on the screen. Each of image has onlick option

onclick="imageClicked(this)"

Function creates border to image and show collapsed input. Image`s border is showing but input is not beign visible.

Here`s the function

function imageClicked(image) {
    var input = $(image).closest("input");
    $(image).css('outline', "solid 2px #5bc0de");
    $(input).css("visibility", "visible");
    $(input).focus();

    $(input).focusout(function () {
        $(image).css('outline', "0");
        if ($(input).val() === "0") {
            $(input).css("visibility", "collapse");
        }
    });
    $(image).focusout(function () {
        if ($(input).val() === "") {
            $(image).css('outline', "0");
        }
    });
}

Here is HTML Structure in Razor View

@for (int i = 0; i < Model.Boxes.Count; i++){
    var base64 = Convert.ToBase64String(Model.Boxes[i].Photo);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);

    var imageId = Model.Boxes[i].BoxId;
    @Html.HiddenFor(m => m.Boxes[i].BoxId)    
    <div class="col-md-2">
        <img src="@imgSrc" width="50%" alt="@Model.Boxes[i].Name" id="@string.Format("image{0}", imageId)" onclick="imageClicked(this)" />
        @Html.TextBoxFor(m => m.Boxes[i].Quantity, new { @class = "form-control", @style = "visibility: collapse; width: 50%; margin-top: 1%", @id = string.Format("input{0}", imageId) })
    </div>
}

解决方案

Closest will search for the parent elements. Here the input is not the parent element of the image. Its a sibling only. You can use siblings() selector for this purpose.

var input = $(image).siblings("input");

Or you can use,

var input = $(image).closest(".col-md-2").find("input");

• Get the parent div(since the image and input are under same parent)
• Then find the child input of that parent

这篇关于jQuery 查找最近的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！