时间戳

首页 > 解决方案 > 输入字段为空时隐藏 DIV

javascript - 输入字段为空时隐藏 DIV

问题描述

我想知道你是否可以帮我解决一个问题。

我正在为事件页面构建一个内容模板，该模板使用高级自定义字段提取数据。

我在管理端有一个字段，将在添加新事件时填写。show_info使用 ID调用该字段#acf-editor-46。

然而，在某些事件中，这将留空，但在前端包裹内容的 DIV 仍将显示在模板上，该 DIV 具有 class .show-info-wrapper。

我想要它，所以当该show_info字段为空白时，DIV.show-info-wrapper不会显示在前端。

我通过浏览取得了一些进展，您可以在这里看到我到目前为止的代码：

HTML（只是一个快速测试设置）：

<textarea id="acf-editor-46" class="wp-editor-area" aria-hidden="true">1111</textarea>
<div class="show-info-wrapper">CONTENT</div>

JavaScript + jQuery：

$(document).ready(function() {

    if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}  

    $('#acf-editor-46').on('change' , function() {

         if( this.value != ''){

               $('.show-info-wrapper').show(); 
          }
          else{
               $('.show-info-wrapper').hide(); 
         }
    });
  });

它适用于 JSFiddle ( http://jsfiddle.net/ha2nedfb/ )，但是，在我的 WordPress 网站上，由于输入和 DIV 不在同一个 DOM 上，因此它不起作用。

谁能帮我解决这个问题？

谢谢！

标签： javascripthtmljquerywordpressadvanced-custom-fields

解决方案

如果稍后呈现 textarea，您可以委托事件。

$(document).on('change', '#acf-editor-46', callback);

链接：

  1. https://api.jquery.com/on/
  2. https://learn.jquery.com/events/event-delegation/

推荐阅读