Question

我正在尝试替换html字符串中的某些文本，但是会引发Uncaught TypeError: Cannot read property 'replace' of undefined错误。

var formHtml = ($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());

在控制台中，当我登录formHtml变量时，它说formData是 undefined ，但是当我从上述代码末尾删除.html()时，它返回有效的html。但是，替换功能仍然会引发未定义的错误！

JS：

var $addAnswerButton = $('#add-answer-button');
var newAnswerFormIndex =  0;

$addAnswerButton.on('click', function() {
    newAnswerFormIndex++;

    if($.trim($('#cx-user-survey-questions-record-edit').find('#answer_type').val()) != ''){
        // get form html
        var formHtml = ($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());
        console.log(formHtml);
        var appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>','cx-record-answer-form-new-'+newAnswerFormIndex);
        console.log(appendFormHtml);

        appendFormHtml = appendFormHtml.replace(/\<#id#>/g,newAnswerFormIndex);
        appendFormHtml = appendFormHtml.replace('bootstrapSwitch-class','bootstrapSwitch');
        $('#answer-container').append(appendFormHtml);

    }
});

HTML标记：

<form id="cx-user-survey-questions-record-edit">
        <div class="row">
            <section class="col col-6">
                <label class="label">Select type</label>
                <label class="input">
                    <select id="answer_type" name="answer_type" class="select2 select2-hidden-accessible" data-bind="select2Binding: answer_type, select2Options: { data: listAnswerTypes, width: &quot;100%&quot;, placeholder: &quot;Select a type...&quot;}" tabindex="-1" aria-hidden="true">
                        <option value="0">Free Text</option><option value="1">Multiple</option></select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-answer_type-container" aria-owns="select2-answer_type-results"><span class="select2-selection__rendered" id="select2-answer_type-container" title="Multiple">Multiple</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                            </label>
                </section>
        </div>
        <button id="add-answer-button" class="btn btn-primary pull-left" type="button">Add Answer</button>
        <button class="btn btn-success cx-btn-submit" type="submit">Save Question</button>
</form>

<div id="answer-container"></div>

<div id="cx-record-answer-form-div" class="hide">
    <div class="multiple">
        <form id="cx-record-answer-form-<#id#>" data-answer-id="<#id#>" class="cx-record-answer-form smart-form" data-edit-allowed="true">
            <section class="col col-4">
                <label class="label">Answer</label>
                <label class="input">
                    <input type="text" id="answer" name="answer" class="form-control" placeholder="Answer" data-bind="value: answer">                </label>
            </section>
        </form>
    </div>

</div>

Answer 1

($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit')不正确。如果要获取ID为answer_type的select的值，请使用-$('#cx-user-survey-questions-record-edit').find('#answer_type').val()。

var $addAnswerButton = $('#add-answer-button');
var newAnswerFormIndex = 0;

$addAnswerButton.on('click', function() {
  newAnswerFormIndex++;

  if ($.trim($('#cx-user-survey-questions-record-edit').find('#answer_type').val()) != '') {
    // get form html
    var formHtml = ($('#cx-user-survey-questions-record-edit').find('#answer_type').val());
    console.log(formHtml);
    var appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>', 'cx-record-answer-form-new-' + newAnswerFormIndex);
    console.log(appendFormHtml);

    appendFormHtml = appendFormHtml.replace(/\<#id#>/g, newAnswerFormIndex);
    appendFormHtml = appendFormHtml.replace('bootstrapSwitch-class', 'bootstrapSwitch');
    $('#answer-container').append(appendFormHtml);

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="cx-user-survey-questions-record-edit">
  <div class="row">
    <section class="col col-6">
      <label class="label">Select type</label>
      <label class="input">
                    <select id="answer_type" name="answer_type" class="select2 select2-hidden-accessible" data-bind="select2Binding: answer_type, select2Options: { data: listAnswerTypes, width: &quot;100%&quot;, placeholder: &quot;Select a type...&quot;}" tabindex="-1" aria-hidden="true">
                        <option value="0">Free Text</option><option value="1">Multiple</option></select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-answer_type-container" aria-owns="select2-answer_type-results"><span class="select2-selection__rendered" id="select2-answer_type-container" title="Multiple">Multiple</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>                                            </label>
    </section>
  </div>
  <button id="add-answer-button" class="btn btn-primary pull-left" type="button">Add Answer</button>
  <button class="btn btn-success cx-btn-submit" type="submit">Save Question</button>
</form>

<div id="answer-container"></div>

<div id="cx-record-answer-form-div" class="hide">
  <div class="multiple">
    <form id="cx-record-answer-form-<#id#>" data-answer-id="<#id#>" class="cx-record-answer-form smart-form" data-edit-allowed="true">
      <section class="col col-4">
        <label class="label">Answer</label>
        <label class="input">
                    <input type="text" id="answer" name="answer" class="form-control" placeholder="Answer" data-bind="value: answer">                </label>
      </section>
    </form>
  </div>

</div>

编辑-

从代码($('#cx-record-answer-form-div .'+$('#cx-user-survey-questions-record-edit').find('#answer_type').val()).html());行开始，似乎您想将html类的div的{{1}}嵌套在{{1} }} multiple，您想从第一个选择下拉列表动态获取类名div。

第id行将返回cx-record-answer-form-div或multiple。而是使用find('#answer_type').val()获取所选选项的文本内容。

仅当您选择文本为text()的选项二时，替换才有效，因为不存在带有var $addAnswerButton = $('#add-answer-button'); var newAnswerFormIndex = 0; $addAnswerButton.on('click', function() { newAnswerFormIndex++; if($.trim($('#cx-user-survey-questions-record-edit').find('#answer_type').val()) != ''){ // get form html const selectedOption = $('#cx-user-survey-questions-record-edit').find('#answer_type option:selected').text().toLowerCase(); const formHtml = $('#cx-record-answer-form-div .' + selectedOption).html(); console.log('Before Replace ', formHtml); if(formHtml) { let appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>', 'cx-record-answer-form-new-' + newAnswerFormIndex); console.log('After Replace ', appendFormHtml); // var appendFormHtml = formHtml.replace('cx-record-answer-form-<#id#>','cx-record-answer-form-new-'+newAnswerFormIndex); // console.log(appendFormHtml); // appendFormHtml = appendFormHtml.replace(/\<#id#>/g,newAnswerFormIndex); // appendFormHtml = appendFormHtml.replace('bootstrapSwitch-class','bootstrapSwitch'); // $('#answer-container').append(appendFormHtml); } } });的html代码。不需要<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="cx-user-survey-questions-record-edit"> <div class="row"> <section class="col col-6"> <label class="label">Select type</label> <label class="input"> <select id="answer_type" name="answer_type" class="select2 select2-hidden-accessible" data-bind="select2Binding: answer_type, select2Options: { data: listAnswerTypes, width: "100%", placeholder: "Select a type..."}" tabindex="-1" aria-hidden="true"> <option value="0">Free Text</option><option value="1">Multiple</option></select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-answer_type-container" aria-owns="select2-answer_type-results"><span class="select2-selection__rendered" id="select2-answer_type-container" title="Multiple">Multiple</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span> </label> </section> </div> <button id="add-answer-button" class="btn btn-primary pull-left" type="button">Add Answer</button> <button class="btn btn-success cx-btn-submit" type="submit">Save Question</button> </form> <div id="answer-container"></div> <div id="cx-record-answer-form-div" class="hide"> <div class="multiple"> <form id="cx-record-answer-form-<#id#>" data-answer-id="<#id#>" class="cx-record-answer-form smart-form" data-edit-allowed="true"> <section class="col col-4"> <label class="label">Answer</label> <label class="input"> <input type="text" id="answer" name="answer" class="form-control" placeholder="Answer" data-bind="value: answer"> </label> </section> </form> </div> </div>，因为它已在multiple中被替换。同样，#cx-record-answer-form-div .free text也没有appendFormHtml.replace(/\<#id#>/g,newAnswerFormIndex);。因此，formHtml.replace行不会替换任何内容。

jQuery替换功能无法替换有效HTML中的文本吗？

1 个答案: