Question

我有一堆这样设置的对象：

   <input type="checkbox" id="check30" class="check"   name="check30" checked>

   <input type="text" name="toAddress30" id="name30" class="contactNameInput addressField">

   <input type="text" id="contactName30" class="contactNameInput mailName" name="contactName30">

   <input type="text" id="time30" class="contactNameInput hidden mailTime" name="time30">

   <input type="text" id="day30" class="contactNameInput hidden mailDay" name="day30">

   <input type="text" id="date30" class="contactNameInput hidden mailDate" name="date30">

   <textarea class="additional contactNameInput" id="additional30" name="additional30" placeholder="Additional requests..."></textarea>

   <div class="preview1"></div>

我需要一个条件，以便如果类'addressField'的任何元素的HTML为空，则整个对象都将被隐藏。我想写一些类似的东西：

if($(".addressField").html() == "") {
  $(this).parent().addClass("hide");
}

我想这样做是将我的类名“ hide”（定义为display：在我的CSS中没有显示）应用于任何.addressField项目为空的父div。但是，显然我在这里对关键字“ this”的使用已关闭，因为它不起作用，并且在我的文本编辑器中，由于未相应格式化，因此显然无法识别出单词“ this”。当我将'this'更改为该元素的实际ID名称时，它可以正常工作，因此看来我在'.parent（）'等方面的结构还可以-我不确定在此如何使用'this'结构。

Answer 1

您需要为$(this)提供一个上下文，以便可以使用for循环遍历类addressField的所有元素：

$(".addressField").each(function(){
    if( $(this).val() === "" ) {
        $(this).parent().addClass("hide");
    } 
})

注意：：addressField是input字段元素，因此它没有html()属性，您应该使用.val()来获取值输入。

$(".addressField").each(function() {
  if ($(this).val() === "") {
    $(this).parent().addClass("hide");
  }
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="checkbox" id="check30" class="check" name="check30" checked>
  <input type="text" name="toAddress30" id="name30" class="contactNameInput addressField">
  <input type="text" id="contactName30" class="contactNameInput mailName" name="contactName30">
  <input type="text" id="time30" class="contactNameInput hidden mailTime" name="time30">
  <input type="text" id="day30" class="contactNameInput hidden mailDay" name="day30">
  <input type="text" id="date30" class="contactNameInput hidden mailDate" name="date30">
  <textarea class="additional contactNameInput" id="additional30" name="additional30" placeholder="Additional requests..."></textarea>
  <div class="preview1"></div>
</div>

<div>
  <input type="checkbox" id="check30" class="check" name="check30" checked>
  <input type="text" name="toAddress30" id="name30" class="contactNameInput addressField" value="Address Field with VALUE">
  <input type="text" id="contactName30" class="contactNameInput mailName" name="contactName30">
  <input type="text" id="time30" class="contactNameInput hidden mailTime" name="time30">
  <input type="text" id="day30" class="contactNameInput hidden mailDay" name="day30">
  <input type="text" id="date30" class="contactNameInput hidden mailDate" name="date30">
  <textarea class="additional contactNameInput" id="additional30" name="additional30" placeholder="Additional requests..."></textarea>
  <div class="preview1"></div>
</div>


<div>
  <input type="checkbox" id="check30" class="check" name="check30" checked>
  <input type="text" name="toAddress30" id="name30" class="contactNameInput addressField">
  <input type="text" id="contactName30" class="contactNameInput mailName" name="contactName30">
  <input type="text" id="time30" class="contactNameInput hidden mailTime" name="time30">
  <input type="text" id="day30" class="contactNameInput hidden mailDay" name="day30">
  <input type="text" id="date30" class="contactNameInput hidden mailDate" name="date30">
  <textarea class="additional contactNameInput" id="additional30" name="additional30" placeholder="Additional requests..."></textarea>
  <div class="preview1"></div>
</div>

Answer 2

this的值取决于其所在的上下文。if块不会为this引入新的上下文。我认为您可能对如何在jQuery回调函数中使用this感到困惑。只有函数和类会引入新的上下文。 jQuery自动将其回调函数中的当前元素绑定为this值。

因此，为了使this引用每个元素，您可以要做的是通过对所选的每个元素执行一个函数：

$(".addressField").filter(function(){
  return $(this).value() === ""
}).each(function() {
   $(this).parent().addClass("hide");
});

但是，使用以下代码可以更轻松地完成您要尝试执行的操作：

$(".addressField").filter(function(){
  return $(this).value() === ""
}).parent().addClass("hide");

大家.addressField，过滤掉所有不为空的人，带上他们的父母，然后一次对所有人执行您想要的事情。

Answer 3

JQuery中的

$(this)是指称为函数的事物。例如：

$("selector").click(function() { alert(this); }); 这是指触发事件处理程序的DOM元素。基本上$("selector")会分解为

在IF语句中使用关键字“ this”

3 个答案: