Question

我是新手并试图创建一个简单的动态页面。它包含MySQL数据库中的内容，由php获取并存储在数组中。我试图使用jQuery基于这些数组的内容生成页面。我已粘贴下面的代码，并解释了这些内容。它没有用，请建议我如何继续。提前谢谢。

    // execute query 
            $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); 
            $row = mysql_fetch_row($result);
            $id[$i] = $row[0];$question[$i] = $row[1];$opt1[$i] = $row[2];$opt2[$i] = $row[3];$opt3[$i] = $row[4];$opt4[$i] = $row[5];$answer[$i] = $row[6];

        }
        mysql_free_result($result); 
    // close connection 
        mysql_close($con);  
        ?>

        <script type="text/javascript">
    //POPULATE THE JS ARRAY WITH DATA FROM SERVER   
        var Q = []; var op1 = [];   var op2 = [];   var op3 = [];   var op4 = [];   var ans = [];
        <?php $cnt = 1;?>
        for(i=1;i<=10;i++)
        {
            Q[i] = "<?php echo $question[$cnt] ?>";
            op1[i] = "<?php echo $opt1[$cnt] ?>";
            op2[i] = "<?php echo $opt2[$cnt] ?>";
            op3[i] = "<?php echo $opt3[$cnt] ?>";
            op4[i] = "<?php echo $opt4[$cnt] ?>";
            ans[i] = "<?php echo $answer[$cnt++] ?>";
        }

//IT WORKS FINE UPTO HERE 

    // TRYING TO DYNAMICALLY DISPLAY THE ARRAY CONTENTS ON THE WEB PAGE based upon clicks on the ids will match with the answer array is it the 
    // correct method to go about ??
    //
        $("document").ready(function() {
        for(var i=1;i<=10;i++) {
        $("p").css("border", "3px solid red");
        $("#question").append(document.createTextNode(Q[i]));
        $("#op1").append(document.createTextNode(op1[i]));
        $("#op2").append(document.createTextNode(op2[i]));
        $("#op3").append(document.createTextNode(op3[i]));
        $("#op4").append(document.createTextNode(op4[i]));
          }
        });

    </script>

    </head>


    // FRAMEWORK OF The html content

    <body>
    <p class="q"></p>
    <p class="op1"></p>
    <p class="op2"></p>
    <p class="op3"></p>
    <p class="op4"></p>
</body>
</html>

// for outis，这是代码：

    var i = 1;
    $("#q").html(Q[i]);
    $("#op1").html(op1[i]);
    $("#op2").html(op2[i]);
    $("#op3").html(op3[i]);
    $("#op4").html(op4[i]);
        for(i=2;i<=10;i++){
            $("#q").html(Q[i]);
            $("#op1").html(op1[i]);
            $("#op2").html(op2[i]);
            $("#op3").html(op3[i]);
            $("#op4").html(op4[i]);
                    $('.set').clone(true).insertAfter('.set');
        }

Answer 1

除了其他人提到的ID /类差异之外，没有带有ID或类“问题”的元素，尽管有<p class="q">。

PHP脚本在JS之前执行，因此重复填充JS数组的循环会使用PHP数组中的第一个值填充它们。浏览器执行的脚本是：

    var Q = []; var op1 = [];   var op2 = [];   var op3 = [];   var op4 = [];   var ans = [];
    for(i=1;i<=10;i++)
    {
        Q[i] = "[question 1, or possibly question 2]";
        op1[i] = "[option 1-1 ...]";
        op2[i] = "[option 1-2...]";
        op3[i] = "[option 1-3...]";
        op4[i] = "[option 1-4...]";
        ans[i] = "[answer 1 ...]";
    }

相反，完全用PHP生成数组：

var Q = [ <?php echo implode(', ', array_map('json_encode', $Q)); ?> ];

而不是每个问题组件的单独数组，单个问题对象数组可以更容易地将问题和选择放在一起：

<?php
    // Fetching DB rows should be handled by a class or function that maps
    // DB rows to PHP objects, which is part of a data access layer, 
    // rather than where you generate HTML output, which belongs to the
    // presentation layer.
    // For this example, we use example data rather than the result of an SQL query.
    $questionQry = array(
        array('Question 1?', 'Choice 1 A', 'Choice 1 B', 'Choice 1 C', 'Choice 1 D'),
        array('Question 2?', 'Choice 2 A', 'Choice 2 B', 'Choice 2 C', 'Choice 2 D'),
        array('Question 3?', 'Choice 3 A', 'Choice 3 B', 'Choice 3 C', 'Choice 3 D'),
        array('Question 4?', 'Choice 4 A', 'Choice 4 B', 'Choice 4 C', 'Choice 4 D')
    );
    // encode data so it's suitable to be output as JS.
    // If you use PDO, you don't need to change this loop.
    foreach ($questionQry as $row) {
        $questions[] = json_encode(array( 
            'query' => $row[0],
            'choices' => array_slice($row, 1)
        ));
    }
?>
var questions = [ <?php echo implode(', ', $questions) ?> ];

请注意，这显示了PDO相对于旧的mysql扩展的另一个优势：查询结果可以与foreach一起循环，就像数组一样，因为PDOStatement实现了Traversable。因此，您可以在数组之间切换示例，并在生成代码的SQL结果之间进行切换，而且只需最少的代码重写。

你HTML is structured的方式，一旦你解决了其他问题，用户就会看到所有问题，然后是所有第一个可能的答案，然后是第二个，＆amp; c。相反，您可以创建一个可以clone的元素，然后填充内容。从结构上思考;问题是一个查询和一些选择，这是一个列表（有序的一个，在那里）。 HTML应该反映这一点。

<p id="QuestionTemplate" class="question" style="display: none">
    <div class="query"></div>
    <ol class="choices">
        <li><input type="radio" value="0" /><label></label></li>
        <li><input type="radio" value="1" /><label></label></li>
        <li><input type="radio" value="2" /><label></label></li>
        <li><input type="radio" value="3" /><label></label></li>
    </ol>
</p>

注意：在你的样式表中拍一个.choices { list-style-type: upper-alpha; }，答案选项自动命名为A到D.

填写问题模板：

function renderQuestion(qstn, qid) {
    var $qElt = $('#QuestionTemplate').clone();
    $qElt.find('.query').attr('id', qid)
                           .text(qstn.query);
    $qElt.find('.choices').children().each(function (i, item) {
        item.find('input').attr({name: qid,
                                 id: qid+'_'+i});
        item.find('label').text(qstn.choices[i])
                          .attr('for', qid+'_'+i);
    }
}
$(function() {
    for (var i=0; i < Q.length; ++i) {
        renderQuestion(Q[i], 'q'+i);
    }
});

或者从头开始创建问题：

function renderQuestion(qstn, qid) {
    var qElt = document.createElement('p');
    qElt.id = 'Question_'+qid;

    var elt= document.createElement('div');
    elt.appendChild(document.createTextNode(qstn.query));
    elt.className="query";
    qElt.appendChild(elt);

    elt = document.createElement('ol');
    elt.className="choices";
    for (var i=0; i < qstn.choices.length; ++i) {
        var choice = document.createElement('li');
        choice.appendChild(document.createElement('input'));
        choice.lastChild.type='radio';
        choice.lastChild.name = qid;
        choice.lastChild.id = qid+'_'+i;
        choice.lastChild.value = i;

        choice.appendChild(document.createElement('label'));
        choice.lastChild.for = qid+'_'+i;
        choice.appendChild(document.createTextNode(qstn.choices[i]));

        elt.appendChild(choice);
    }
    qElt.appendChild(elt);
    document.appendChild(qElt);
}

在任何一种情况下，生成JS时都不应输出正确的答案。

由于您不需要JS来生成问题，因此更好的方法是在PHP中生成问题，这意味着当JS不可用时，您不必担心该怎么做。

<?php
    // Fetching DB rows should be handled by a class or function that maps
    // DB rows to PHP objects, which is part of the data access layer, 
    // rather than where you generate HTML output.
    // For this example, we just use example data.
    $questions = array(
        array('query' => 'Question 1?', 'A' => 'Choice 1 A', 'B' => 'Choice 1 B', 
                                          'C' => 'Choice 1 C', 'D' => 'Choice 1 D'),
        array('query' => 'Question 2?', 'A' => 'Choice 2 A', 'B' => 'Choice 2 B', 
                                          'C' => 'Choice 2 C', 'D' => 'Choice 2 D'),
        array('query' => 'Question 3?', 'A' => 'Choice 3 A', 'B' => 'Choice 3 B',
                                          'C' => 'Choice 3 C', 'D' => 'Choice 3 D'),
        array('query' => 'Question 4?', 'A' => 'Choice 4 A', 'B' => 'Choice 4 B', 
                                          'C' => 'Choice 4 C', 'D' => 'Choice 4 D')
    );
?>

<?php foreach ($query as $i => $q): ?>
  <p id="Question_<?php echo $i; ?>" class="question">
      <div class="query"><?php echo array_shift($q); </div>
      <ol class="choices">
        <?php foreach ($q as $j => $choice): ?>
          <li>
              <input type="radio" name="<?php echo "q$i"; ?>" id="<?php echo "q${i}_${j}"; ?>" value="<?php echo $j; ?>" />
              <label for="<?php echo "q${i}_${j}; ?>"><?php echo $choice; </label>
          </li>
        <?php endforeach; ?>
      </ol>
  </p>
<?php endforeach; ?>

Answer 2

我不确定为什么要通过jquery运行输出。对我来说似乎是不必要的过度工程。为什么你不能直接将db输出过滤到你的页面或者我错过了什么？

Answer 3

你在jquery中的选择器正在寻找id的...

$("#op4").append(document.createTextNode(op4[i]));

^正在寻找'op4'的id，而你的标记的第五段有'op4'类......

<p class="op4"></p>

可能尝试更改jquery或标记，以便选择器匹配。

不确定这是否是疏忽，一双新鲜的眼睛可能已经抓到了这里。祝你好运！

Answer 4

每个问题都会被下一个问题覆盖。你只会看到最后一个。

使用jQuery动态操作页面内容

4 个答案: