Question

我想请你帮忙。我正确的地理测验代码。在这个测验中，有一个表格，其中包含正确/错误答案的数量。有一些国家的邮票，你应该猜测什么邮票适合哪个信封。有一张桌子：

<table class = "table table-responsive countries-scores">
    <tr>
        <td>Name of the country</td>
        <td>Quantity of stamps</td>
        <td>Quantity of right answers</td>
        <td>Quantity of wrong answers</td>
    </tr>
 </table>

还有jQuery代码：

$(document).ready (function(){
    $.each( countries, function( key, value ) {
        var tr = '<tr><td>';
        tr+=key;
        tr += '</td><td>';
        tr += value.stamps.length;
        tr += '</td><td></td><td></td></tr>';
        $(".countries-scores").append(tr);
    });
 });

它的答案库：

var countries = {
    brazil: {
        id: "BrazCanvas",
        color: 'red',
        title: 'from Brazil',
        stamps: ['brazilian1', 'brazilian2', 'brazilian3', 'brazilian4', 'brazilian5', 'brazilian6'],
    },
    india: {
        id: 'IndCanvas',
        color: 'green',
        title: "From India",
        stamps: ['india1', 'india2', 'india3', 'india4'],
    },
    china: {
        id: "ChiCanvas",
        color: "yellow",
        title: "From China",
        stamps: ['china1', 'china2', 'china3', 'china4'],
    },
    africa: {
        id: "AfrCanvas",
        color: "blue",
        title: "From South Africa",
        stamps: ['africa1', 'africa2', 'africa3', 'africa4'],
    },
    russia: {
        id: "RusCanvas",
        color: "brown",
        title: "From Russia",
        stamps: ['russia1', 'russia3'],
    },
}


var postSpamps = {
    brazilian1:  {
        src: 'img/postcards/brazil1.jpg',
        class1: 'braz-drop',
        id: 'brazil1',
        alt: 'Brazilian Bird',
    },
    india1:  {
        src: 'img/postcards/india1.jpg',
        class1: 'ind-drop',
        id: 'India1',
        alt: 'India1',
    },
    russia1:  {
        src: 'img/postcards/russia1.jpg',
        class1: 'rus-drop',
        id: 'Russia1',
        alt: 'Russia1',
    },
    africa1:  {
        src: 'img/postcards/africa1.jpg',
        class1: 'afr-drop',
        id: 'Africa1',
        alt: 'Africa1',
    },
    china1:  {
        src: 'img/postcards/china1.jpg',
        class1: 'chin-drop',
        id: 'China1',
        alt: 'China1',
    },
    brazilian2:  {
        src: 'img/postcards/brazil2.jpg',
        class1: 'braz-drop',
        id: 'brazil2',
        alt: 'Brazil2',
    },
    brazilian3:  {
        src: 'img/postcards/brazil3.jpg',
        class1: 'braz-drop',
        id: 'brazil3',
        alt: 'brazil3',
    },
    india2:  {
        src: 'img/postcards/india2.jpg',
        class1: 'ind-drop',
        id: 'India2',
        alt: 'India2',
    },
    africa2:  {
        src: 'img/postcards/africa2.jpg',
        class1: 'afr-drop',
        id: 'Africa2',
        alt: 'Africa2',
    },
    china2:  {
        src: 'img/postcards/china2.jpg',
        class1: 'chin-drop',
        id: 'China2',
        alt: 'China2',
    },
    brazilian4:  {
        src: 'img/postcards/brazil4.jpg',
        class1: 'braz-drop',
        id: 'brazil4',
        alt: 'Brazilian Bird',
    },
    india3:  {
        src: 'img/postcards/india3.jpg',
        class1: 'ind-drop',
        id: 'India3',
        alt: 'India3',
    },
    russia3:  {
        src: 'img/postcards/russia2.jpg',
        class1: 'rus-drop',
        id: 'Russia2',
        alt: 'Russia2',
    },
    africa3:  {
        src: 'img/postcards/africa3.jpg',
        class1: 'afr-drop',
        id: 'Africa3',
        alt: 'Africa3',
    },
    china3:  {
        src: 'img/postcards/china3.jpg',
        class1: 'chin-drop',
        id: 'China3',
        alt: 'China3',
    },
    brazilian5:  {
        src: 'img/postcards/brazil5.jpg',
        class1: 'braz-drop',
        id: 'brazil5',
        alt: 'Brazilian5',
    },
    brazilian6:  {
        src: 'img/postcards/brazil6.jpg',
        class1: 'braz-drop',
        id: 'brazil6',
        alt: 'brazil6',
    },
    india4:  {
        src: 'img/postcards/india4.jpg',
        class1: 'ind-drop',
        id: 'India4',
        alt: 'India4',
    },
    africa4:  {
        src: 'img/postcards/africa4.jpg',
        class1: 'afr-drop',
        id: 'Africa4',
        alt: 'Africa4',
    },
    china4:  {
        src: 'img/postcards/china4.jpg',
        class1: 'chin-drop',
        id: 'China4',
        alt: 'China4',
    },
}

我的目标是在此表中添加正确和错误的答案。如果用户回答正确答案的数量应该增加。如果他回答错误的答案数量也应该增加。我该怎么办？谢谢您的帮助。最好的祝福。

Answer 1

不确定测验表单的外观或处理方式的对错情况。但也许我可以这样指点。

更新您的html以包含class country name和列right以及wrong。

  $.each(countries, function(key, value) {
    var tr = '<tr class="' + key + '"><td>';
    tr += key;
    tr += '</td><td>';
    tr += value.stamps.length;
    tr += '</td> <td class="right"></td> <td class="wrong"></td> </tr>';
    $(".countries-scores").append(tr);
  });

然后你可以这样更新是非。

  // brazil 4
  $(".brazil .wrong").html("4");

  // china 5
  $(".china .wrong").html("5");

  // or wrap into a function call
  updateRight("brazil", 10);


function updateRight(countryName, quantity) {
  $("." + countryName).find(".right").html(quantity);
}

如何在我的表中附加正确/错误答案的数量？

1 个答案: