如何使用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>

Polldetails.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

請注意，您不能為單個表單值混合和匹配單選按鈕和其他輸入類型。 通過將4個單選按鈕命名為2個不同的名稱，您實際上已經創建了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');
    }
}

如果您需要任何幫助以適應它，只需詢問。 祝好運！