jQuery Намиране на най-близкия вход

Имам структура като всяко изображение има вход по-долу. Имам x изображения на екрана. Всяко изображение има опция за кликване

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("visibility", "collapse");
        }
    });
    $(image).focusout(function () {
        if ($(input).val() === "") {
            $(image).css('outline', "0");
        }
    });
}

Ето HTML структура в изглед Razor

@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>
}

person miechooy    schedule 02.06.2016    source източник
comment
трябва и html структура..   -  person Anoop Joshi    schedule 02.06.2016
comment
$(image).closest("input"); но closest() търси предшественик и тъй като input е празен елемент, той не може да има потомък...   -  person A. Wolff    schedule 02.06.2016


Отговори (1)


Closest ще търси родителските елементи. Тук входът не е родителският елемент на изображението. Това е само брат или сестра. Можете да използвате селектор siblings() за тази цел.

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

Или можете да използвате,

var input = $(image).closest(".col-md-2").find("input");
  • Вземете родителския div (тъй като изображението и входът са под същия родител)
  • След това намерете дъщерния вход на този родител
person Anoop Joshi    schedule 02.06.2016