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

所以我有一个变量，它的值为

cValue

代表“当前值”。然而，每当我的输入字段变成按钮时，问题是：多个按钮被更改，因此它不再保存一个值。我试图将值分配回按钮，但由于我引用的是cValue（当前值），它会将所有输入字段更改为最后填写的给定值。如何保留插入到输入字段的值

澄清示例：您有3个输入字段，当所有3个字段都正确填写（与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();
             }
          });

创建按钮的函数：

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

函数getcorrectbn（值）{
var correctBtn=$（''{
“类”：“btn btn成功按钮更正”，
“类型”：“按钮”，
“id”：“按钮”+CBC++，
“值”：值
});
}

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

---

对于当前代码，条件

exercise.syllels.length===correctsyls.length

将仅在最后一次输入时匹配。前两个将只在

correctSylls

中推送正确的值并返回，它们不会再次在（'blur'）代码上执行

填充第三个输入时，代码
$（this）.closest（'.syll row'）.find（'input.syl input'）
将查找三个输入，并用最后一个输入的值替换它们

如果您转到
console.log（$（this）.closest（'.syll row'）.find（'input.syl input'）
，您将看到一个inputs元素数组，方法
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();
         }
      });

var sylInput=$（“”{
“类型”：“文本”，
“类”：“窗体控件syl输入”，
“名称”：+c++，
“id”：+idsyll++
}).on（'blur'，function（）{
var cValue=$（this.val（）；
如果（cValue==“”）{
返回；
}
如果（cValue==音节）{
校正推力（cValue）；
控制台日志（correctSylls）；
}
if（exercise.syllels.length==correctsyls.length）{
/*******************修改代码******************/
$（this）.closest（'.syll行'）.find（'input.syl input'）.each（函数（）{
$（this.replaceWith（getCorrectBtn（$（this.val（）））
})
S.addRight（）；
S.playRight（）；
}else if（cValue！==音节）{
$（this.css（{'color'：'#e00413'}）；
美国玩错了（）；
S.addError（）；
}
});
正确！但是现在有一个简单的问题哈哈。为什么它不显示值tho？当我检查元素时，它确实说值是我想要的…但在界面中它只显示了一个奇怪的绿色按钮。编辑：我尝试将单词放在和之间。我现在如何更改它，使值不仅是正确的，而且是正确的我会把这个词放在元素nevermind之间：）我把这个按钮改成了一个输入字段，类型是“button”。现在需要显示该值，而不需要在开始和结束元素之间进行某些操作。Cool；）无论如何，如果您想再次尝试按钮解决方案，您可以看看这个答案，它显示了如何创建带有文本（）的按钮
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();
         }
      });