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

只需将#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 2

if (!$("#acf-editor-46").val()) {
// textarea is empty
}

试试这个来检查 textarea 是否为空

Answer 3

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

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

链接：

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

Answer 4

假设<textarea>和<div>在这个顺序中真的是兄弟姐妹（你的文本与示例相矛盾）&如果你可以在textarea添加一个placeholder并且你只需要新的浏览器，那么有一个纯 CSS解决方案：

<textarea ... placeholder=" "> </textarea>

.show-info-wrapper {
  display: block;
}

.wp-editor-area:placeholder-shown + .show-info-wrapper {
  display: none;
}

这是一支笔。