Как мне вставить радиоэлементы в панель? - PullRequest
Новая
       4

Как мне вставить радиоэлементы в панель?

0 голосов
/ 07 января 2020

Я пытаюсь сделать динамическую инъекцию c в панель. Я не уверен, что это проблема, потому что панель скрыта, когда я вызываю эту функцию, или если я правильно внедряю данные.

Группа управления, на которую я нацеливаюсь, находится на панели - скрыта, когда я ее запускаю Функция обновляет значения, но становится замороженной и непригодной для использования, даже если она идентична рабочей модели, которую я использую локально. Группа радиосвязи каким-то образом остается заблокированной на первом радиоэлементе, и я не могу изменить значение по щелчку после запуска этой функции.

Она находится в боковой панели [фильтр]> https://jsbin.com/gugepeboci/edit?html, js, вывод

HTML (jQuery Mobile меняет эту структуру на странице и переносит радиоэлементы в .ui-controlgroup-controls) 

<fieldset id="colour-radio-group" data-role="controlgroup" data-mini="true" data-iconpos="right">
    <legend></legend>
        <input type="radio" name="colour-choice" id="radio-choice-5" value="Any Colour" checked="checked">
        <label for="choice-1">Any Colour</label>
        <input type="radio" name="colour-choice" id="radio-choice-6" value="orange">
        <label for="choice-2">Green</label>
        <input type="radio" name="colour-choice" id="radio-choice-7" value="yellow">
        <label for="choice-3">Orange</label>
        <input type="radio" name="colour-choice" id="radio-choice-8" value="violet">
        <label for="choice-4">Purple</label>
</fieldset>

Javascript и jQuery

 // Data to be inserted
 var myArray = ["red", "blue", "black"];

 //Empty radio group for new data
 $("#colour-radio-group .ui-controlgroup-controls").empty();

 // Loop array and add data dynamically
 for (var x = 0; x < myArray.length; x++) {

     var index = x + 2;

     if (x == 0) {

         // inject default
         $(`<div class="ui-radio ui-mini">
               <label for="colour-choice-1" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-on ui-first-child">Any Colour</label>
               <input type="radio" name="colour-choice" id="colour-choice-1" value="default" checked="checked" data-cacheval="false">
            </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

     }

     // inject data
     $(`<div class="ui-radio ui-mini">
           <label for="colour-choice-` + index + `" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-right ui-radio-off">`+ myArray[x] +`</label>
           <input type="radio" name="colour-choice" id="colour-choice-` + index + `" value="` + myArray[x] + `" data-cacheval="false">
        </div>`).appendTo('#colour-radio-group .ui-controlgroup-controls');

 }

// fix UI problem
$('#colour-radio-group .ui-controlgroup-controls').children().last().children('label').addClass('ui-last-child');

Я только что обошёл эту проблему и продолжал копать себе яму, какой-нибудь совет?

Ответы [ 2 ]

1 голос
/ 07 января 2020

Это лучший способ динамически генерировать новую контрольную группу. Обратите внимание, что это решение предназначено только для создания совершенно новой группы кнопок управления. 

// Data to be inserted
var myArray = ["red", "blue", "black"];

$('#click').click(function() {

  // Remove existing controlgroup
  $(".mypanels .ui-controlgroup").remove();

  // Create a new one
  var rbuttons = $("<fieldset/>", {
    id: "colour-radio-group",
    "data-role": "controlgroup",
    "data-mini": true
  });

  // Add it
  rbuttons.appendTo(".mypanels");

  // Loop array and add data dynamically
  for (var x = 0; x < myArray.length; x++) {
    if (x == 0) {

      // inject default
      rbuttons.append($("<input/>", {
        type: "radio",
        name: "colors-panel",
        id: "color-d",
        checked: true
      })).append($("<label/>", {
        for: "color-d",
        text: "Any Color"
      }));

    }

    // inject data
    rbuttons.append($("<input/>", {
      type: "radio",
      name: "colors-panel",
      id: "color-" + x
    })).append($("<label/>", {
      for: "color-" + x,
      text: myArray[x]
    }));
  }

  // Apply jQM enhancement
  $("#colour-radio-group").controlgroup();
});

Демо

1 голос
/ 07 января 2020

Добавлять только обычный- html (вместо jquery -mobile stuff).

И триггер "create" для "# color-radio-group" выполняет свою работу. 

> https://jsbin.com/nijezovali/1/edit?html,js,output

Редактировать: если вы хотите, вы можете добавить jquery мобильный материал.

$ ('# color-radio-group .ui-controlgroup-controls'). Trigger ("create");

достаточно.

...