Question

早安，我试图弄清楚如何从DOM中完全删除表单元素并在用户从下拉菜单中选择是或否时将其替换。下面是我的HTML代码；

<label for="show_form"><?php _e('Show Form?', 'text-domain'); ?></label>
<select class="form-control" id="show_form" name="show_form">
    <option value="YES">YES</option>
    <option value="NO">NO</option>
</select>
<form id="co_form" method="post" action="">
    <!-- My Form Codes here -->
</form>

我能够使用下面的jQuery代码删除表单；

jQuery(document).ready(function() {
    jQuery('#show_form').on('change', yes_or_no_toggle);
});

function yes_or_no_toggle() {
    var getYesNOSelect = jQuery("#show_form option:selected").val();

    if ( getYesNOSelect == 'NO' ) {
        var clone = $('#co_form').clone();
        jQuery('#co_form').remove();
    } else {
        jQuery('body').append(clone);
    }

}

不知道我在做什么错，但是它删除了已经可以使用的表单，但是当我选择“是”时，什么也没发生

我希望用户选择“是”时重新出现该表格，应根据用户是否选择“是/否”将其删除并替换。请帮助

Answer 1

将克隆变量从if块中取出。在下面的示例中，它超出了功能范围，应该可以使用。

jQuery(document).ready(function() {
    jQuery('#show_form').on('change', yes_or_no_toggle);
});

var formObj = $('#co_form').clone();
function yes_or_no_toggle() {
    var getYesNOSelect = jQuery("#show_form option:selected").val();

    if ( getYesNOSelect == 'NO' ) {

        jQuery('#co_form').remove();
    } else {
        jQuery('body').append(formObj);
    }
}

Answer 2

您需要将克隆的表单存储在变更处理程序之外。删除后，下次yes_or_no_toggle()被调用时便不存在

尝试类似的东西：

jQuery(document).ready(function() {

  // store clone on page load
  var clone = $('#co_form').clone();

  jQuery('#show_form').on('change', yes_or_no_toggle);

  function yes_or_no_toggle() {
    var getYesNOSelect = jQuery(this).val();

    if (getYesNOSelect == 'NO') {
      jQuery('#co_form').remove();
    } else {
      jQuery('body').append(clone);
    }

  }
});

使用jQuery

2 个答案: