javascript - 一次在一个元素上调用自定义函数

Question

我有一个 jQuery 扩展方法来创建基于 this 的自定义动画下拉选择列表。回答。在具有一个下拉菜单的页面上使用此方法非常有效:

扩展方法如下:

$.fn.extend({
    slidingSelect: function (options) {
        var select = $(this);
        var selector = select.selector;

        var width = $(selector).width();

        var selectedValue = select.val();

        if (selectedValue === "undefined")
            selectedValue = select.find("option:first").val();

        console.log($(selector + " option:selected").text());

        var divToggle = $("<div class='SelectorToggle SelectorToggle-defualt'>" + $(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button></div>")
                        .attr({ id: select.attr("id") + "Toggle" })
                        .css({ width: select.width() + 20 })
                        .click(function () {
                            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
                            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
                            $(selector).slideToggle("fast");
                        }).insertBefore(select);

        var optionCount = $(selector + " option").length;

        if (optionCount < 5) {
            select.attr("size", optionCount);
        }
        else {
            select.attr("size", 5);
        }

        select.addClass("drop-down-selector");

        $(selector).css({ 'width': select.width() + 20, 'position': 'absolute', "z-index": '9999' });

        select.change(function () {
            divToggle.html($(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button>");
            $(selector + "Toggle").toggleClass("SelectorToggle-defualt");
            $(selector + "Toggle").toggleClass("SelectorToggle-pressed");
            $(selector).slideToggle("fast");
        });
    }
});

我这样调用它:

 $("#LanguageSelector").hide().slidingSelect();

然而，我在让它在具有多个下拉菜单的页面上工作时遇到了无穷无尽的问题。我的下拉列表是作为具有服务器端处理的 DataTable 解决方案的一部分动态创建的。页脚中的下拉菜单:

如果我调用以下内容:

$("select").hide().slidingSelect();

然后页面上的所有下拉菜单都会创建自定义控件:

如果我尝试对每个元素分别调用扩展方法:

$("select").hide().each(function(index) {
    $(this).slidingSelect();
});

我还尝试在创建下拉菜单时单独调用扩展方法(只调用其中一个):

$('#RelatedCasesGrid tfoot th').each(function () {

    var col = $(this).html();

    //..........

    else if (col === "ComplaintTypeName") {
        $(this).html(GetDropDownInput(col, caseId));
        var element = $(this).find("select");
        element.hide().slidingSelect();
    }

GetDropDownInput(col, caseId) 方法创建下拉菜单如下:

function GetDropDownInput(col, id) {

    var control;

    $.ajax({
        method: "GET",
        dataType: "json",
        async: false,
        url: "/OATS/Api/GetColumnItems/" + id + "?column=" + col
    }).done(function (data) {
        control = "<select  id='selector' class='table-filter-input-drop-down-list'><option value='' disabled selected>Filter by</option>"

        for (var i = 0; i < data.length; i++) {

            control += "<option col-type=" + data[i].Type + " value='" + data[i].Name + "'";

            if (data[i].Selected) {
                control += "selected='selected'";
            }

            control += ">" + data[i].Name + "</option>";
        }

        control += "</select>";
    });

    return control;
}

结果:

Answer 1

发件人:http://www.w3schools.com

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

但是您的 ajax 方法为所有选择创建相同的 id:“selector”。更改此方法以创建唯一 ID(“col”参数的值似乎可以用于此目的)，然后调用:

$("#your_unique_id").hide().slidingSelect();