Как выполнить вложенные объекты для плагинов jquery? - PullRequest
Новая
       32

Как выполнить вложенные объекты для плагинов jquery?

1 голос
/ 30 марта 2019

Я пытался научиться создавать простой плагин jquery.

Это мой код : 

$.fn.TestPlugin = function( options ) {
    var setting = $.extend({
        "image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
        "select": [
                    {
                        "Label 1": ["opt 1", "opt 2", "opt 3"],
                        "Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
                    }
                  ]
    }, options );

    return this.each(function( index ){
        $( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );       

        //select
        var $select = "<select>";
            //loop for select

            $select += "</select>";
        $( $select ).appendTo( "#container-"+ [index+1] +"" );
    });
};

Как я могу получить такие результаты: 

<select>
    <optgroup label="Label 1">
        <option>opt 1</option>
        <option>opt 2</option>
        <option>opt 3</option>
    </optgroup>
    <optgroup label="Label 2">
        <option>opt 4</option>
        <option>opt 5</option>
        <option>opt 6</option>
        <option>opt 7</option>
    </optgroup>
</select>

Сгенерировано из setting.select

Спасибо

Извините, мой английский трудно понять, я использую Google Translate.

1 Ответ

1 голос
/ 30 марта 2019

Я бы создал элементы напрямую, используя jQuery. А затем, как вы уже прокомментировали, выполните итерацию ваших настроек, создайте select, optgroups и options: 

$.fn.TestPlugin = function( options ) {
    var setting = $.extend({
        "image" : [ "image1.jpg", "image2.jpg", "image2.jpg"],
        "select": [
                    {
                        "Label 1": ["opt 1", "opt 2", "opt 3"],
                        "Label 2": ["opt 4", "opt 5", "opt 6", "opt 7"]
                    }
                  ]
    }, options );

    return this.each(function( index ){
        $( this ).wrap( "<div class='container' id='container-"+ [index+1] +"'></div>" );       

        for (var i = 0; i < setting.select.length; i++) { // iterate all select definitions
          var sel = setting.select[i];
          var $select = $("<select />"); // create a select element
          for (var lbl in sel) { // iterate all labels
            if (!sel.hasOwnProperty(lbl)) { // ignore inherited members
              continue;
            }
            var opt = sel[lbl];
            var $optgrp = $('<optgroup />').attr('label', lbl).appendTo($select); // create optgroup and add to select
            for (var j = 0; j < opt.length; j++) { // iterate options
              $('<option />').text(opt[j]).appendTo($optgrp); // create option and add to optgroup
            }
          }
          $select.appendTo( "#container-"+ [index+1] +"" );
        }
    });
};

$('ul>li>div').TestPlugin();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div>Select 1</div>
  </li>
  <li>
    <div>Select 2</div>
  </li>
  <li>
    <div>Select 3</div>
  </li>
</ul>
...