输入字段为空时隐藏 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 {

  display: block;

}

.wp-editor-area:placeholder-shown + .show-info-wrapper {

  display: none;

}

这是一支笔。

Answer 2

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

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

链接：

1. https://api.jquery.com/on/

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

Answer 3

只需将 的事件更改#acf-editor-46为input。

$(document).ready(function() {

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

    $('#acf-editor-46').on('input' , function() {  // Just change event to input

         if( this.value != ''){

               $('.show-info-wrapper').show(); 

          }

          else{

               $('.show-info-wrapper').hide(); 

         }

    });

  });

Answer 4

if (!$("#acf-editor-46").val()) {

// textarea is empty

}

试试这个来检查文本区域是否为空