Question

如何创建我可以重用的自定义html，实际上我想创建这样的东西：

<script>
    // Menu Definition
    var menu = {
       p1: "0",
       p2: true,
       value: "test",
       setValue: function (value) {
            this.value=value;
       },
       getValue: function () {
            return value;
       },
       html: "<span class='p1'>"+p1+"</span>"+
             "<span class='p2'>"+p2+"</span>"


   }
   // Adding instance 
   $("#menu1").add(new menu());
   $("#menu2").add(new menu());

</script>
<html>
     <body>
          // Define menu containers
          <div id="menu1"></div>
          <div id="menu2"></div>
     </body>
</html>

Answer 1

看起来很复杂，如何使用带参数的函数

<html>

    <head>
        <script>
            function menu(p1, p2) {
                var $p1 = $('<span />', {'class': 'p1', text: p1}),
                    $p2 = $('<span />', {'class': 'p2', text: p2});

                return $p1.add($p2);
            }

            $(function() {
                $("#menu1").append(menu(0, 'test'));
                $("#menu2").append(menu(1, 'something'));
            });
        </script>
    </head>

    <body>
        <div id="menu1"></div>
        <div id="menu2"></div>
    </body>

</html>

FIDDLE

或者你可以把它变成一个jQuery插件

$.fn.menu = function(p1, p2) {
    var $p1 = $('<span />', {'class': 'p1', text: p1}),
        $p2 = $('<span />', {'class': 'p2', text: p2});

    this.append($p1.add($p2));
}

$(function() {
    $("#menu1").menu(0, 'test');
    $("#menu2").menu(1, 'something');
});

FIDDLE

自定义可重用html对象的实例

1 个答案: