Использование ключевого слова this в выражении IF - PullRequest
Новая
       8

Использование ключевого слова this в выражении IF

0 голосов
/ 06 сентября 2018

У меня есть несколько объектов, настроенных так: 

   <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>

Мне нужно условие, чтобы, если HTML любого из элементов с классом addressField был пустым, весь объект был скрыт. Я хотел написать что-то вроде: 

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

Я подумал, что для этого нужно применить имя моего класса 'hide' (которое определено как display: none в моем CSS) к родительскому div любого пустого элемента .addressField. Однако, очевидно, что мое использование ключевого слова «это» здесь отключено, потому что оно не работает, и в моем текстовом редакторе оно явно не распознает это слово «это», поскольку оно не отформатировано соответствующим образом. Когда я изменяю «this» на фактическое имя id этого элемента, он работает нормально, поэтому кажется, что моя структура в терминах «.parent ()» и т. Д. В порядке - я просто не уверен, как использовать «this» в этом структура.

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

$(this) в JQuery относится к тому, что вызывало функцию. Например:

  • $("selector").click(function() { alert(this); }); это относится к элементу DOM, на котором запускается обработчик событий. В основном то, что $("selector") ломается до
0 голосов
/ 06 сентября 2018

Значение this зависит от контекста, в котором он находится. Блок if не вводит новый контекст для this. Я думаю, вы, вероятно, озадачены тем, как this может использоваться внутри функции обратного вызова jQuery. Только функции и классы вводят новый контекст. 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 s, отфильтруйте все не пустые, возьмите их parent s и затем выполните то, что вы хотите, на всех них сразу.

0 голосов
/ 06 сентября 2018

Вам нужно дать $(this) контекст, чтобы вы могли использовать цикл for для циклического прохождения всех элементов с классом addressField: 

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

ПРИМЕЧАНИЕ: Элемент поля addressField is и 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>
...