亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

輸入字段為空時隱藏 DIV

輸入字段為空時隱藏 DIV

慕桂英3389331 2023-02-24 17:49:55
我想知道你是否可以幫我解決一個問題。我正在為事件頁面構建一個內容模板,它通過使用高級自定義字段來提取數據。我在管理端有一個字段,將在添加新事件時填寫。該字段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 上,所以它不起作用。誰能幫我解決這個問題?
查看完整描述

4 回答

?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

假設<textarea>和<div>確實是這個順序的兄弟姐妹(您的文字與示例相矛盾)&如果您可以將 a 添加placeholder到textarea&您只需要新的瀏覽器,那么有一個純 CSS 解決方案:


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

.show-info-wrapper {

  display: block;

}


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

  display: none;

}

這是一支筆。



查看完整回答
反對 回復 2023-02-24
?
神不在的星期二

TA貢獻1963條經驗 獲得超6個贊

如果 textarea 稍后呈現,您可以委托事件。

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

鏈接:

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

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


查看完整回答
反對 回復 2023-02-24
?
蠱毒傳說

TA貢獻1895條經驗 獲得超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(); 

         }

    });

  });


查看完整回答
反對 回復 2023-02-24
?
桃花長相依

TA貢獻1860條經驗 獲得超8個贊

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

// textarea is empty

}

試試這個來檢查文本區域是否為空


查看完整回答
反對 回復 2023-02-24
  • 4 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號