Php 使用jQuery动态操作页面内容_Php_Jquery_Arrays_Web Applications_Dom

Php 使用jQuery动态操作页面内容

php jquery arrays web-applications dom

Php 使用jQuery动态操作页面内容,php,jquery,arrays,web-applications,dom,Php,Jquery,Arrays,Web Applications,Dom,我是一个新手，尝试制作一个简单的动态页面。它的内容在MySQL数据库中，由php获取并存储在数组中。我正在尝试使用jQuery根据这些数组的内容生成页面。我已经粘贴了下面的代码和注释来解释这些东西。它不工作，请建议我如何继续。提前谢谢 // execute query $result = mysql_query($query) or die ("Error in query: $query. ".mysql_error()); $row

我是一个新手，尝试制作一个简单的动态页面。它的内容在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>

//执行查询
$result=mysql\u query（$query）或die（“查询中的错误：$query.”.mysql\u Error（））；
$row=mysql\u fetch\u row（$result）；
$id[$i]=$row[0]$问题[$i]=$row[1]$opt1[$i]=$row[2]$opt2[$i]=$row[3]$opt3[$i]=$row[4]$opt4[$i]=$row[5]$答案[$i]=$row[6]；
}
mysql_free_result（$result）；
//密切联系
mysql_close（$con）；
?>
//使用来自服务器的数据填充JS阵列
var Q=[]；var op1=[]；var op2=[]；var op3=[]；var op4=[]；var ans=[]；
对于（i=1；i，jquery中的选择器正在查找id的
$("#op4").append(document.createTextNode(op4[i]));

^正在查找id为“op4”，而您的标记的第五段具有类“op4”
<p class="op4"></p>



也许可以尝试更改jquery或标记，以便选择器匹配
不确定这是否是一个新的眼睛可能在这里发现的疏忽。祝你好运修复！
你在jquery中的选择器正在寻找id
$("#op4").append(document.createTextNode(op4[i]));

^正在查找id为“op4”，而您的标记的第五段具有类“op4”
<p class="op4"></p>



也许可以尝试更改jquery或标记，以便选择器匹配
不确定这是否是一个新的眼睛可能发现的疏忽。祝你好运修复！
我不确定你为什么要通过jquery运行输出。对我来说，这似乎是不必要的过度工程。你为什么不能直接将db输出过滤到你的页面，或者我遗漏了什么？
我不确定你为什么要运行你通过jquery的r输出。对我来说似乎是不必要的过度工程。为什么你不能直接将db输出过滤到你的页面，或者我遗漏了什么呢？
每个问题都会被下一个问题覆盖。你只会看到最后一个问题。
每个问题都会被下一个问题覆盖。你只会看到最后一个问题。
此外o其他人提到的ID/类差异，没有ID或类为“问题”的元素，尽管存在

PHP脚本在JS之前执行，因此填充JS数组的循环会重复使用PHP数组中的第一个值填充JS数组。浏览器执行的脚本是：
    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 ...]";
    }

注意：在样式表中划出一个。选项{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);
    }
});

函数渲染问题（qstn、qid）{
var$qElt=$（“#问题模板”）.clone（）；
$qElt.find（'.query'）.attr（'id'，qid）
.text（qstn.query）；
$qElt.find（'.choices'）.children（）.each（函数（i，项）{
item.find（'input'）.attr（{name:qid，
id:qid+''i}）；
item.find（'label'）.text（qstn.choices[i]）
.attr（'for'，qid+'u'+i）；
}
}
$（函数（）{
对于（变量i=0；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);
}

函数渲染问题（qstn、qid）{
var qElt=document.createElement（'p'）；
qElt.id=‘问题’；
var elt=document.createElement（'div'）；
elt.appendChild（document.createTextNode（qstn.query））；
elt.className=“查询”；
儿童英语教学；
elt=document.createElement（'ol'）；
elt.className=“选择”；
对于（变量i=0；i

在任何一种情况下，生成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; ?>


除了其他人提到的ID/class差异之外，没有ID或class为“question”的元素，尽管有一个

PHP脚本在JS之前执行，因此填充JS数组的循环会重复使用PHP数组中的第一个值填充JS数组。浏览器执行的脚本是：
    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 ...]";
    }

注意：在样式表中划出一个。选项{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);
    }
});

函数渲染问题（qstn、qid）{
var$qElt=$（“#问题模板”）.clone（）；
$qElt.find（'.query'）.attr（'id'，qid）
.text（qstn.query）；
$qElt.find（'.choices'）.children（）.each（函数（i，项）{
item.find（'input'）.attr（{name:qid，
id:qid+''i}）；
item.find（'label'）.text（qstn.choices[i]）
.attr（'for'，qid+'u'+i）；
}
}
$（函数（）{
对于（变量i=0；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);
}

函数渲染问题（qstn、qid）{
var qElt=document.createElement（'p'）；
克尔特