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

Question

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

这是一个链接!

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的任何HTML元素,并使用类链接并循环遍历每个元素.在每个循环中,它将作为参数传递给匿名函数(因为它没有名称或指针)each.当你进入该函数的范围时,JQuery将这个绑定到元素,在本例中是a.link.您可以通过查看第一个console.log()代码来打印出来,并打印出this与窗口元素绑定的代码.您将看到属于该对象的大量信息.但是当你再次看到控制台并查看console.log()文本之后现在我是谁？你会看到打印出的元素.这就是this内部的each()功能.很酷,对吗？

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

在匿名函数里面,你this引用了你的a.link HTML元素.你需要做一个$(this)以使它成为一个JQuery元素并在其上使用JQuery函数.一旦完成,你所做的只是询问它是否为空,如果它是,那么只是隐藏它.

我知道它似乎令人困惑,但它只是在一开始.一旦你理解了JavaScript是关于闭包和对象的,你就会意识到它是狂野的狂野西部是多么酷.:)