输入字段为空时隐藏 DIV

Question

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

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

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

然而，在某些事件中，这将留空，但环绕前端内容的 DIV 仍将显示在模板上，DIV 具有类.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 上，所以它不起作用。

谁能帮我解决这个问题？

Answer 1

假设<textarea>和<div>确实是这个顺序的兄弟姐妹（您的文字与示例相矛盾）＆如果您可以将 a 添加placeholder到textarea＆您只需要新的浏览器，那么有一个纯 CSS 解决方案：<textarea ... placeholder=" "> </textarea>.show-info-wrapper {&nbsp; display: block;}.wp-editor-area:placeholder-shown + .show-info-wrapper {&nbsp; display: none;}这是一支笔。

Answer 2

如果 textarea 稍后呈现，您可以委托事件。$(document).on('change',&nbsp;'#acf-editor-46',&nbsp;callback);链接：https://api.jquery.com/on/https://learn.jquery.com/events/event-delegation/

Answer 3

只需将 的事件更改#acf-editor-46为input。$(document).ready(function() {&nbsp; &nbsp; if($('#acf-editor-46').val() == '' ){$('.show-info-wrapper').hide();}&nbsp;&nbsp;&nbsp; &nbsp; $('#acf-editor-46').on('input' , function() {&nbsp; // Just change event to input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if( this.value != ''){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('.show-info-wrapper').show();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('.show-info-wrapper').hide();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; });&nbsp; });

Answer 4

if (!$("#acf-editor-46").val()) {// textarea is empty}试试这个来检查文本区域是否为空