javascript - jQuery - $(this) 不接受元素

Question

所以我正在制作新项目。我制作了 php 多语言导航栏，而在其他语言中，该链接没有名称。如果没有文本但我的代码似乎不起作用，我想隐藏该链接。你能帮帮我吗？谢谢!

这是 a link !

HTML

<div class="navigation">
  <div class="nav_item">
    <a href="#" class="link"><!-- Home --></a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">About</a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">Portfolio</a>
  </div>
</div>

jQuery

$(function () {
    if ($("a.link").is(':empty')) {
    $(this).parent().addClass("hidden");
  }
});

Answer 1

为了有另一种方法，这是我的两分钱。

它不起作用的原因是因为您的$(this) 没有引用您的$('a.link')。我强烈建议做一些不错的 console.logs() 来尝试理解 this 指的是什么。掌握 JavaScript 中的闭包和作用域非常重要，因为如果人们不理解它，就会很头疼。我添加了一个带有控制台的工作片段以帮助理解。

$(document).ready(function(){
  console.log("Who am I?");
  console.log(this);
  $("a.link").each(function(){
    console.log("Now who am I?");
    console.log(this); // Now this really does refer to your nav links, you should see it printed out in the console
    if( $(this).is(":empty") ){
      console.log(" I am going to be hidden. ");
      console.log(this);
      $(this).text("Super hidden"); //You would actually do $(this).parent('.nav-item').hidden() but I did it like this so you can verify visually that it targets the right element
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <div class="nav_item">
    <a href="#" class="link"><!-- Home --></a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">About</a>
  </div>
  <div class="nav_item">
    <a href="#" class="link">Portfolio</a>
  </div>
</div>

解释代码的每一部分:

$("a.link").each(function(){..});

在这一行中，JQuery 正在访问任何类型为 a 且类为 link 的 HTML 元素，并遍历每个元素。在每个循环中，它应用您作为参数传递给 each 的匿名函数(因为它没有名称或指向它的指针)。当您在该函数的范围内时，JQuery 已友好地将 this 绑定(bind)到该元素，在本例中为 a.link。您可以通过查看代码的第一个 console.log() 来检查这一点，打印出绑定(bind)到 window 元素的 this .您将看到属于该对象的一大堆信息。但是，当您再次查看控制台并查看 Now who am I? 文本后的 console.log() 时，您将看到 a元素打印出来。那就是 each() 函数中的 this。很酷，对吧？

if( $(this).is(":empty") ){
   console.log(" I am going to be hidden. ");
   console.log(this);
   $(this).text("Super hidden"); 
}

在那个anonymous 函数中，您的this 指的是您的a.link HTML 元素。您需要执行 $(this) 才能使其成为 JQuery 元素并在其上使用 JQuery 函数。完成后，您要做的就是询问它是否为空，如果是，则将其隐藏。

我知道这看起来令人困惑，但这只是开始。一旦你理解了 JavaScript 就是关于闭包和对象的，你就会意识到它是狂野的西部是多么的酷。 :)