Question

所以我有一个变量cValue，代表“当前值”。但是，无论何时我的输入字段变成按钮，问题是：多次更改按钮，因此不再保存任何值。我尝试将值分配回按钮，但是由于引用的是cValue（当前值），它将把所有输入字段更改为给定的最后填写的值。如何保持输入字段中插入的值？

澄清示例：您有3个输入字段，当正确填写所有3个输入字段（与JSON文件匹配时，它都与JSON文件匹配）时，所有3个输入字段都将变成按钮，指示您完成了该部分。但是，每当我尝试分配给3个输入字段的值时（第一个输入的值为'1'，第二个输入为'2'，第三个输入为'3'），它将所有按钮的值更改为最后填写的输入字段。这样就应该是3。如何保持按钮的显示状态：第一个按钮“ 1”，第二个按钮“ 2”和第三个按钮“ 3”？

我的代码如下：

$.map(exercise.syllables, function (syllable, j) { 
        if (!syllable || !syllable.trim().length) {
       // If it doesn't exist or is an empty string, return early without creating/appending elements
           return;
      }

        var innerSylCol = $('<div/>', {
            class: 'col-md-3 inputSyllables'
        });

        var sylInput = $('<input/>', {
            'type': 'text',
            'class': 'form-control syl-input',
            'name':  +c++,
            'id': +idsyll++
        }).on('blur', function() {
            var cValue = $(this).val();

            if(cValue === "") {
               return;
            }

            if (cValue === syllable) {
                correctSylls.push(cValue);
                console.log(correctSylls);
            }

            if (exercise.syllables.length === correctSylls.length) {
                $(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));
              //  console.log(getCorrectBtn(cValue));
                S.addRight();
                S.playRight();
          } else if (cValue !== syllable){
                $(this).css({'color':'#e00413'});
                S.playWrong();
                S.addWrong();
             }
          });

最有可能出错的部分：

$(this).closest('.syll-row').find('input.syl-input').replaceWith(getCorrectBtn(cValue));

创建按钮的函数：

function getCorrectBtn(value) {
var correctBtn = $('<button/>', {
    'class': 'btn btn-success buttonCorrect',
    'type': 'button',
    'id': "button" + CBC++,
    'value': value
});
}

编辑：已检查的答案是正确的。但是，这是最终结果，当我检查它们时，它们确实具有所需的值...但是它并未在前端显示出来：

Answer 1

使用您当前的代码，只有填满最后一个输入时，条件exercise.syllables.length === correctSylls.length才会被匹配。前两个只是将其正确的值压入correctSylls内并返回，因此不会再次执行on('blur')代码。

当第三个输入被填充时，代码$(this).closest('.syll-row').find('input.syl-input')将找到三个输入并将其替换为最后一个输入的值。

如果您使用console.log($(this).closest('.syll-row').find('input.syl-input')，则会看到一组输入元素，方法replaceWith适用于每个输入元素，但是仅在第三个元素的blur上被调用，它将替换他们使用它的值。

我认为可能的解决方案是改为：

var sylInput = $('<input/>', {
        'type': 'text',
        'class': 'form-control syl-input',
        'name':  +c++,
        'id': +idsyll++
    }).on('blur', function() {
        var cValue = $(this).val();

        if(cValue === "") {
           return;
        }

        if (cValue === syllable) {
            correctSylls.push(cValue);
            console.log(correctSylls);
        }

        if (exercise.syllables.length === correctSylls.length) {
            /******************* Modified code ******************/
            $(this).closest('.syll-row').find('input.syl-input').each(function () { 
              $(this).replaceWith(getCorrectBtn($(this).val()))
            })

            S.addRight();
            S.playRight();
      } else if (cValue !== syllable){
            $(this).css({'color':'#e00413'});
            S.playWrong();
            S.addWrong();
         }
      });

如何仅使用一个变量将多个值分配给不同的按钮

1 个答案: