Question

当数组正确时，应将输入字段转到btn btn-success按钮（有效）。现在出现了我似乎无法逾越的部分：它们没有将其值插入输入字段中。示例：您在输入字段中插入单词“ hello”（并且我们假设单词“ hello”是正确的），然后变为绿色按钮。但是，它并不能保持其价值。如何使用多个输入字段来实现此目标？

代码如下：

}).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());
                S.addRight();
                S.playRight();
          }

我尝试附加到按钮cValue上，但这没用（按预期）。

创建成功按钮的功能：

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

return correctBtn;
}

这是完整的循环（以及如何创建输入字段）：

$.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());
                S.addRight();
                S.playRight();
          }

Answer 1

$(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
    });
  return correctBtn;
}

这可能应该起作用。

了解replaceWith的工作方式。您并不仅仅是改变现有的输入，而是要替换它。由于该值是输入的数据，因此当您替换它时，您将清除数据。因此，您必须将数据传递到getCorrectBtn函数中，并将其分配给新按钮。

在更改按钮的输入时如何保持所有所需的输入值？

1 个答案: