javascript - 如何使用 jQuery Mobile 动态创建单选按钮？

Question

使用 for 循环条件动态创建单选按钮时，不会创建单选按钮。我关注的代码是

Polldetails.html

      <div data-role="content" class="pollsdetailsscreen">
            <p>Polls details page with radio buttons created dynamically.</p>
        </div>
        <div>   
             <ul id="radiopolls" data-theme="e" >
            </ul>
            comments:<textarea name="pollscomments" id="pollscomments"></textarea>
            <div data-role="content"  >
                <a href="#" data-role="button" style="width: 100px;float:right">Submit</a>
            </div>  
        </div>

民意调查.js

     var pollsDetails = function pollsDetails(){

//for(var i=0;i<4;i++)
//  {
//var radiobutton = document.createElement('label');
//radiobutton.innerHTML="<input type='radio' name='hello'>hii000";
// $('#radiopolls').prepend(radiobutton).trigger('create');
//  }


for(var i=0; i<4; i++)
    {
        if(data.type == "poll")
            {
                             console.log("this is polls page");
                            //here i need to create four radio buttons dynamically based on below **data** options. 
            }
        else if(data.type == "review")
            {
              console.log("this is reviews page");              
            }                       
    }
     }



        var data = {
       type:"poll",
       question : "How are you?",
       options : [{
           type : "radio",
           name: "radioTest",
           text: "Good"
       },
       {
           type:"radio",
           name: "radioTest",
           text: "Fine"
       },
       {
           type:"radio",
           name: "radioTest2",
           text: "Nice"
       },
       {
           type:"radio",
           name: "radioTest2",
           text: "V Nice"
       },
       {
           type:"checkbox",
           name:"check",
           text:"This is a check box"
       },
       {
           type:"textarea",
           name:"comments",
           text:"Comments Please"
       }    
       ]
    };

根据检查条件的代码，当条件为 data.type = "poll" 时，我需要动态创建 4 个单选按钮，但我无法根据代码动态创建单选按钮。 . 谁能帮我解决这个问题.........

Answer 1

请注意，您不能为单个表单值混合搭配单选按钮和其他输入类型。通过用 2 个不同的名称命名 4 个单选按钮，您实际上已经创建了 2 个单独的问题，每个问题都有 2 个答案。我很确定下面的代码不会生成您想要的内容，但它应该能让您走得更远，您可以根据需要对其进行调整:

if (data.type === 'poll') {
    var poll = {};
    for (optionIndex = 0; optionIndex < data.options.length; optionIndex++) {
        var option = data.options[optionIndex];
        if (option.type === 'radio') {
            var fieldset = poll[option.name];
            if (!fieldset) {
                poll[option.name] = fieldset = $('<fieldset data-role="controlgroup">');
                fieldset.append( $('<legend>').html(data.question) );
            }

            var answerID = 'poll-answer-' + (optionIndex + 1);
            fieldset.append( $('<input type="radio" />').attr('name', option.name).attr('value', option.text).attr('id', answerID) );
            fieldset.append( $('<label>').attr('for', answerID).html(option.text) );
        }
    }

    var containerElement = $('#radiopolls');
    for (answerSet in poll) {
        poll[answerSet].appendTo(containerElement).trigger('create');
    }
}

如果您在调整它时需要任何帮助，请直接询问。祝你好运!