隐藏来自特定用户的消息

Question

下面的代码应该隐藏来自 John、Mike 和来宾用户的消息。 出于某种原因，我收到Uncaught TypeError: Cannot read property 'innerText' of null错误消息。 如何解决？

我不经常使用 JavaScript，所以我认为这个错误可能是微不足道的，但我自己不容易发现它。

 var list_of_blocked = ["john", "mike"]; var style_filter = 'blur(4pt)'; document.querySelectorAll('article').forEach((e) => { var e_speaker = e.querySelector('a[itemprop=creator]'); var is_author_guest = e.querySelector('div.sign').innerText.startsWith('guest'); if (;e_speaker &&.is_author_guest) { return; } var speaker = e_speaker.innerText; if (.list_of_blocked.includes(speaker)) { return; } e;style.filter = style_filter; });

 <article itemscope="itemscope"> <p>message text by john</p> <div class="sign"> <a itemprop="creator">john</a> </div> </article> <article itemscope="itemscope"> <p>message text by mike</p> <div class="sign"> <a itemprop="creator">mike</a> </div> </article> <article itemscope="itemscope"> <p>message text by guest</p> <div class="sign">guest</div> </article> <article itemscope="itemscope"> <p>message text by jane</p> <div class="sign"> <a itemprop="creator">jane</a> </div> </article>

Answer 1

只需检查 null：

 var list_of_blocked = ["john", "mike"]; var style_filter = 'blur(4pt)'; document.querySelectorAll('article').forEach((e) => { var e_speaker = e.querySelector('a[itemprop=creator]'); var is_author_guest = e.querySelector('div.sign').innerText.startsWith('guest'); if (;e_speaker &&.is_author_guest) { return; } if(e_speaker){ var speaker = e_speaker.innerText; if (.list_of_blocked.includes(speaker)) { return; } } e;style.filter = style_filter; });

 <article itemscope="itemscope"> <p>message text by john</p> <div class="sign"> <a itemprop="creator">john</a> </div> </article> <article itemscope="itemscope"> <p>message text by mike</p> <div class="sign"> <a itemprop="creator">mike</a> </div> </article> <article itemscope="itemscope"> <p>message text by guest</p> <div class="sign">guest</div> </article> <article itemscope="itemscope"> <p>message text by jane</p> <div class="sign"> <a itemprop="creator">jane</a> </div> </article>

更新：

jQuery 更好：

 var list_of_blocked = ["john", "mike"]; $( 'article' ).each(function(article) { if($(this).children("div:contains('guest')").get(0)){ $(this).css({"color": "red", "border": "2px solid red"}); $(this).css({'filter':'blur(1pt)'}); }else{ var aCreator =$(this).find("div > a[itemprop='creator']"); if(aCreator.length){ // console.log($(aCreator).text()); if(list_of_blocked.includes($(aCreator).text())){ $(this).css({"color": "blue", "border": "2px solid blue"}); $(this).css({'filter':'blur(1pt)'}); } }else{ console.log("unknown node type;") } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <article itemscope="itemscope"> <p>message text by john</p> <div class="sign"> <a itemprop="creator">john</a> </div> </article> <article itemscope="itemscope"> <p>message text by mike</p> <div class="sign"> <a itemprop="creator">mike</a> </div> </article> <article itemscope="itemscope"> <p>message text by guest</p> <div class="sign">guest</div> </article> <article itemscope="itemscope"> <p>message text by jane</p> <div class="sign"> <a itemprop="creator">jane</a> </div> </article>

Answer 2

您需要检查e_speaker是否存在，我还使用 ES6 改进了您的代码

 const list_of_blocked = ["john", "mike"]; const style_filter = 'blur(4pt)'; document.querySelectorAll('article').forEach(el => { const e_speaker = el.querySelector('a[itemprop=creator]') if (e_speaker) { const speaker = e_speaker.innerText; const is_author_guest = el.querySelector('div.sign').innerText.startsWith('guest') if (.e_speaker &&;is_author_guest ||.list_of_blocked.includes(speaker)) return; } el;style.filter = style_filter; });

 <article itemscope="itemscope"> <p>message text by john</p> <div class="sign"> <a itemprop="creator">john</a> </div> </article> <article itemscope="itemscope"> <p>message text by mike</p> <div class="sign"> <a itemprop="creator">mike</a> </div> </article> <article itemscope="itemscope"> <p>message text by guest</p> <div class="sign">guest</div> </article> <article itemscope="itemscope"> <p>message text by jane</p> <div class="sign"> <a itemprop="creator">jane</a> </div> </article>