jQuery- Дадаць тэкст у адным радку кожнага ўваходу радыё

Так што я спрабую зрабіць дынамічны тэст і змагаюся з даданнем тэксту маіх радыё уваходаў. Я выкарыстоўваю для цыклу, каб зрабіць некалькі ўваходаў радыё. Я хацеў бы, каб тэкст быў на той жа лініі, што і кожны выбар радыё, але я не магу зрабіць гэта.

Калі я выкарыстоўваю дадаць() ён стварае новы радок затым дадае тэкст.

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>')
            $('#target').append('
My text here

');

Калі я выкарыстоўваю <�пазнаку для кода /> атрыбуту HTML, ён дадае тэкст у канцы ўсіх радыёстанцый.

for (j = 0; j < 5; j++) {
            $('#target').append('<input type="radio" name="radioName"/>').after("");

Here is my jsFiddle showing the example: http://jsfiddle.net/tCkuF/2/

У ідэале я хацеў бы дадаць зменную, якая ўяўляе аб'ект як тэкст, так што змяняецца аўтаматычна, як віктарына бяруцца.

1

9 адказы

Рэкамендуецца выкарыстоўваць элемент спісу ў такіх выпадках

<div id="container">
    <div id="question"></div>
    <div id="target">
        
        </div>
    </div>
    

    Таксама даюць стылі

    #options{
        list-style:none;
        list-style-type:none;
    }
    

    Затым дадайце LI элемент. Належным ідэнтыфікатар для выкарыстання для атрыбут

    var $li = $("
  • ").appendTo("#options"); $li.append('<input id="option' + (j+1) + '" type="radio" name="question' + i + '" value="' + allQuestions[i].correctAnswer + '"/>'); $li.append(" ");

    demo : http://jsfiddle.net/tCkuF/6/

  • 2
    дададзена

    Рэкамендуецца выкарыстоўваць элемент спісу ў такіх выпадках

    <div id="container">
        <div id="question"></div>
        <div id="target">
            
          </div>
      </div>
      

      Таксама даюць стылі

      #options{
          list-style:none;
          list-style-type:none;
      }
      

      Затым дадайце LI элемент. Належным ідэнтыфікатар для выкарыстання для атрыбут

      var $li = $("
    • ").appendTo("#options"); $li.append('<input id="option' + (j+1) + '" type="radio" name="question' + i + '" value="' + allQuestions[i].correctAnswer + '"/>'); $li.append(" ");

      demo : http://jsfiddle.net/tCkuF/6/

    • 2
      дададзена

      Рэкамендуецца выкарыстоўваць элемент спісу ў такіх выпадках

      <div id="container">
          <div id="question"></div>
          <div id="target">
              
            </div>
        </div>
        

        Таксама даюць стылі

        #options{
            list-style:none;
            list-style-type:none;
        }
        

        Затым дадайце LI элемент. Належным ідэнтыфікатар для выкарыстання для атрыбут

        var $li = $("
      • ").appendTo("#options"); $li.append('<input id="option' + (j+1) + '" type="radio" name="question' + i + '" value="' + allQuestions[i].correctAnswer + '"/>'); $li.append(" ");

        demo : http://jsfiddle.net/tCkuF/6/

      • 2
        дададзена

        Your desired output can be achieved by simply adding a div wrapper around the radio & 'label'. Check this out:

        $(function() {
        var i = 0;
        var allQuestions = [{
            question: "What is 4x6?",
            choices: [46, 15, 25, 24],
            correctAnswer: 3
        }, {
            question: "What is 21x 21?",
            choices: [441, 2121, 388],
            correctAnswer: 0
        }, {
            question: "Which number is prime?",
            choices: [1, 5, 10, 39],
            correctAnswer: 1
        }, {
            question: "What is 65/5",
            choices: [3, 31, 12, 13, 21],
            correctAnswer: 3
        }];
        
        function populateQuestion() {
            $("#question").text(allQuestions[i].question); //add question
            var $target = $('#target'),
                j = 0;
            //add radio and answer choices
            for (j; j < allQuestions.length; j++) {
        
                (function (idx) {
        
                    var html = '<div class="answerRow"><input class="answerRadio" type="radio" name="question' + idx + '" value="' + allQuestions[idx].correctAnswer + '"/>';
                    $target.append(html);
                })(j);
            }
        }
        
        populateQuestion();
        
        
        }); //onload jQuery close
        
        2
        дададзена

        Your desired output can be achieved by simply adding a div wrapper around the radio & 'label'. Check this out:

        $(function() {
        var i = 0;
        var allQuestions = [{
            question: "What is 4x6?",
            choices: [46, 15, 25, 24],
            correctAnswer: 3
        }, {
            question: "What is 21x 21?",
            choices: [441, 2121, 388],
            correctAnswer: 0
        }, {
            question: "Which number is prime?",
            choices: [1, 5, 10, 39],
            correctAnswer: 1
        }, {
            question: "What is 65/5",
            choices: [3, 31, 12, 13, 21],
            correctAnswer: 3
        }];
        
        function populateQuestion() {
            $("#question").text(allQuestions[i].question); //add question
            var $target = $('#target'),
                j = 0;
            //add radio and answer choices
            for (j; j < allQuestions.length; j++) {
        
                (function (idx) {
        
                    var html = '<div class="answerRow"><input class="answerRadio" type="radio" name="question' + idx + '" value="' + allQuestions[idx].correctAnswer + '"/>';
                    $target.append(html);
                })(j);
            }
        }
        
        populateQuestion();
        
        
        }); //onload jQuery close
        
        2
        дададзена

        Your desired output can be achieved by simply adding a div wrapper around the radio & 'label'. Check this out:

        $(function() {
        var i = 0;
        var allQuestions = [{
            question: "What is 4x6?",
            choices: [46, 15, 25, 24],
            correctAnswer: 3
        }, {
            question: "What is 21x 21?",
            choices: [441, 2121, 388],
            correctAnswer: 0
        }, {
            question: "Which number is prime?",
            choices: [1, 5, 10, 39],
            correctAnswer: 1
        }, {
            question: "What is 65/5",
            choices: [3, 31, 12, 13, 21],
            correctAnswer: 3
        }];
        
        function populateQuestion() {
            $("#question").text(allQuestions[i].question); //add question
            var $target = $('#target'),
                j = 0;
            //add radio and answer choices
            for (j; j < allQuestions.length; j++) {
        
                (function (idx) {
        
                    var html = '<div class="answerRow"><input class="answerRadio" type="radio" name="question' + idx + '" value="' + allQuestions[idx].correctAnswer + '"/>';
                    $target.append(html);
                })(j);
            }
        }
        
        populateQuestion();
        
        
        }); //onload jQuery close
        
        2
        дададзена

        You have to remove ‍‍‍

        tag and add an extra
        to each line

        $('#target').append('test append creates a line space
        ');

        check demo at http://jsfiddle.net/tCkuF/3/

        1
        дададзена

        You have to remove ‍‍‍

        tag and add an extra
        to each line

        $('#target').append('test append creates a line space
        ');

        check demo at http://jsfiddle.net/tCkuF/3/

        1
        дададзена

        You have to remove ‍‍‍

        tag and add an extra
        to each line

        $('#target').append('test append creates a line space
        ');

        check demo at http://jsfiddle.net/tCkuF/3/

        1
        дададзена