當輸入字段為空時隱藏 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;
}

這是一支筆。