Question

我创建了此检查，该检查应检查JSON中的syllables是否与syllables匹配，我（确实）成功地做到了这一点，但是可以将输入字段更改为绿色填写某行的所有btn btn-success时的syllables按钮？编辑：row是引导类row。该模板几乎只是引导程序。

这是我的JSON的样子；

 {
"main_object": {
"id": "new",
"getExerciseTitle": "testforcounter",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "testforcounter",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "Texel",
      "syllables": [
        "tex",
        "el",
        "",
        ""
      ]
    },
    {
      "word": "3",
      "syllables": [
        "1",
        "2",
        "3",
        ""
      ]
    }
  ]
},
"dataType": "json"
 }
}

您可以看到第一个单词包含2个syllables，当用户在前端填写两个输入字段时，如果两个字段都正确，则应将它们标记为绿色。例如：word 3具有3个输入字段，因为它在我的JSON文件中包含3个syllables。当用户填写3个输入字段1,2,3时，应同时将所有3个标记为绿色。当用户填写1，然后弹出为绿色，2且该输入字段弹出为绿色，3，第三个输入字段弹出为绿色时，则为NOT。它们都应该保留为输入字段，直到正确填写了所有所需的输入字段，然后它们都应该跳为绿色。

这是我的函数的样子：

function prepareCheck() {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
   $(document).on('change', '.syl-input', function() {
       var rowCounter = $(this).parent().parent().parent().parent().attr('id');
       var inputCounter = $(this).attr('id');
       var jsyl = json.main_object.main_object.exercises[rowCounter].syllables[inputCounter];
       var jsylall = json.main_object.main_object.exercises[rowCounter].syllables;
       var valueInput = $(this).val();

       console.log(jsyl);

       if (valueInput == jsyl) {
        var value = valueInput;
          var correctBtn = $('<button/>', {
             'class': 'btn btn-success buttonCorrect',
             'type': 'button'
          });
            S.addRight();
            $(this).replaceWith(correctBtn);
            $('.buttonCorrect').html(value);
            value = '';
       } else if ($.inArray(valueInput, jsylall) >= -1) {
            S.addWrong();
       }
  });
});
}

图片供您可视化：

Answer 1

这很奇怪：

function prepareCheck() {
  $.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
     $(document).on('change', '.syl-input', function() {

我会编码

$(document).on('change', '.syl-input', function() {.....});

和

function prepareCheck() {
  $.getJSON('json_files/jsonData_' + ID + '.json', function(json) {...})`

要进行检查，请尝试类似的操作

var $row = $(this).closest(".row"), // assuming the "row" has class="row"
    $buts = $row.find(".syl-input"), 
    $correct = $row.find(".buttonCorrect");
$buts.toggleClass("green",$buts.length==$correct.length);

填满一行中的所有内容时，使输入字段为绿色

1 个答案: