Question

所以我正在制作新项目。我已经制作了php multilingual nav-bar，而在其他语言中，没有链接的名称。如果没有文本，我想隐藏该链接，但是我的代码似乎不起作用。你能帮我吗？谢谢！

这里是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正在访问类型为 link 的任何类型为 a 的HTML元素，并循环遍历每个元素。在每个循环中，它都应用匿名函数（因为它没有名称或指向它的指针），您将其作为参数传递给each。当您在该函数的作用域内时，JQuery已将 this 绑定到元素，在本例中为 a.link 。您可以通过查看代码的前console.log()并打印出绑定到 window 元素的this来进行检查。您将看到一大堆属于该对象的信息。但是，当您再次查看控制台并在文字我现在是谁？之后查看console.log()时，您会看到打印出 a 元素。这就是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就是关于闭包和对象的全部知识，您就会意识到，成为狂野的西部真是太酷了。：）

Answer 2

这是因为this的上下文是指窗口元素。您需要在此处使用.filter()函数来获取没有文本的元素：

 $('a.link').filter(function(){
   return !$(this).text().trim();
 }).closest('.nav_item').hide()

$(document).ready(function() {
  $('a.link').filter(function(){
     return !$(this).text().trim();
  }).closest('.nav_item').hide()
});

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <div class="nav_item">s
    <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-$（this）不接受元素

2 个答案: