Question

我想使用函数创建一些jquery组件并在html中使用它们，但不知道该怎么做。这是我尝试过的。

function CreateElement (id, type) {
    $(document).ready (function () {
        if (type == "metricCombobox") {
            var element = $('#' + id).combobox();

            return element;
        }
    });    
}

在HTML页面中。

<select id="' + CreateElement('metricComboboxSimples', 'metricCombobox') + '" >

Answer 1

你真的需要在DOM中创建元素，然后向它添加内容吗？或者你可以在jQuery中创建所有元素吗？在jQuery中创建，至少对我来说，更容易理解，你可以控制元素的整个创建，然后将它附加到已经在DOM中的另一个元素，甚至是document.body ...请，看看下面的代码并运行代码片段，看看我的答案是否对您有帮助。

var selectOptions= [
      {val : 1, text: 'One'},
      {val : 2, text: 'Two'},
      {val : 3, text: 'Three'}
];

    function CreateElement (id, type, options) {
        $(document).ready (function () {

            if (type == "metricCombobox") {
                var arr = options;
                var element = $('<select>');
                element.attr('id', id); 

                $(arr).each(function() {
                 var selOption = $("<option>");
                 selOption.attr('value', this.val);
                 selOption.text(this.text);
                 element.append(selOption);
                });
                
            }else if (type == 'input'){
                var element = document.createElement('input');
                element.value = 'input created'
                $(element).attr('id',id);
            }

            $("#MyDiv").append(element);
        });    
    }

    CreateElement('metricComboboxSimples', 'metricCombobox', selectOptions);
    CreateElement('testeId', 'input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="MyDiv"></div>

使用函数创建jquery组件并在HTML中使用它们

1 个答案: