jQuery, и используя 'this'

Question

Я пытаюсь понять, как в jQuery сказать это; Я читал снова и снова, как использование this - это правильный способ сделать это, когда вы собираетесь выполнять что-то на одном и том же элементе, вместо того, чтобы вызывать его несколько раз.

Так скажем, у меня есть эта функция:

function fadeDiv1() { 
    $(function() { 
     $("[id$=lblFadeDiv]").text("aldkfjalfjalsdjf"); 
     $("[id$=lblFadeDiv]").fadeIn('slow').delay(5000).fadeOut('slow'); 
    }); 
}; 

Выполнение двух вызовов с использованием $("[id$=lblFadeDiv]") я прочитал это не способ сделать это. Вместо этого мы должны использовать this, но все примеры, которые я видел, находятся на каком-то событии. Так два вопроса:

1. Во-первых, это правда, что я должен использовать this и
2. Во-вторых, как бы я идти о выполнении этого?

Answer 1

В этой функции у вас нет this, но вы ссылаетесь на один и тот же селектор дважды, что означает его неэффективность, чтобы искать его дважды. Вы просто должны приковать свои функции вместе:

$("[id$=lblFadeDiv]").text("aldkfjalfjalsdjf") 
        .fadeIn('slow') 
        .delay(5000) 
        .fadeOut('slow'); 

В гипотетической ситуации, когда вы хотели, чтобы это произошло при нажатии этого элемента, затем можно использовать this:

$("[id$=lblFadeDiv]").on('click',function(){ 
    $(this).text("aldkfjalfjalsdjf") 
        .fadeIn('slow') 
        .delay(5000) 
        .fadeOut('slow'); 

}); 

Answer 2

Я читайте снова и снова, как это правильно использовать, когда вы собираетесь выполнять что-то на одном и том же элементе, а не вызывать его несколько раз

Это аргумент в пользу использования стандартной переменной, а не для использования this.

Во-первых, это правда, что я должен использовать это, и

Не в этом случае (см. Выше)

Во-вторых, как бы я это сделал?

Либо использование цепочки или переменной. Цепочка удобна и лаконична, но иногда может быть немного неудобной для отладки и не всегда возможна (например, если вам нужно иметь инструкцию в середине цепочки, которая не связана с цепью). Переменная является более многословной, но легче отлаживаемой и более гибкой.

Chaining:

function fadeDiv1() { 
    $("[id$=lblFadeDiv]") 
     .text("aldkfjalfjalsdjf") 
     .fadeIn('slow') 
     .delay(5000) 
     .fadeOut('slow'); 
} 

Переменная:

function fadeDiv1() { 
    var div = $("[id$=lblFadeDiv]"); 
    div.text("aldkfjalfjalsdjf"); 
    div.fadeIn('slow'); 
    div.delay(5000); 
    div.fadeOut('slow'); 
} 

И вы можете смешивать и сочетать в зависимости от обстоятельств, например, это вполне допустимо:

function fadeDiv1() { 
    var div = $("[id$=lblFadeDiv]"); 
    div.text("aldkfjalfjalsdjf"); 
    div.fadeIn('slow') 
     .delay(5000) 
     .fadeOut('slow'); 
} 

Answer 3

В вашем случае, использование this не получится.This будет просто ссылаться на выполненную вами функцию, у которой нет свойств, с которыми вы хотите работать.

Насколько я понимаю (я не эксперт), использование this происходит либо в случае, когда вы находитесь в событии, и хотите получить доступ к объекту. Или, когда вы обращаетесь к свойствам объекта, находясь в пределах объекта. Моя терминология, вероятно, не здесь, но вот примеры.

В объекте:

var person = { 
    firstName: "John", 
    lastName: "Smith", 
    fullName: function() { 
     console.log(this.firstName + " " + this.lastName); 
    } 
} 

слушателя событий:

$("#button").click(function() { 
    $(this).attr('value', 'changed!'); 
}); 

Answer 4

this относится к элементу, который будучи нажата или называется.

Скажем (простой пример), что у вас есть кнопка, которая получает синюю границу при нажатии:

$("#myButton").click(function(){ 
 
    $(this).css("border", "green dashed 2px"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="myButton">Click me</button>

this должны быть обернуты в объект JQuery для того, чтобы ответить на JQuery-х такие команды, как .css(.... Вот почему мы используем $(this).

Теперь, что вы ищете, отличается. Вы не хотите дважды звонить $("[id$=lblFadeDiv]"). Это очень просто: вы просто запоминаете выбор в переменной.

$lblFadeDiv = $("[id$=lblFadeDiv]") 

$ lblFadeDiv является допустимым именем переменной ($ можно использовать в имени переменной, это просто стандартный символ). Мне нравится добавлять $ перед моими объектами jQuery, чтобы знать, что они объекты jQuery, а не только srings или numbers.

Таким образом, вы ищете элемент (или многие элементы) в DOM и оберните их в объект jQuery только один раз.

Теперь в памяти (это кэшируется), вы можете использовать его несколько раз, это очень дешево:

$lblFadeDiv.text("aldkfjalfjalsdjf"); 
$lblFadeDiv.fadeIn('slow').delay(5000).fadeOut('slow'); 

Там нет клики элемента в вашем контексте, это просто функция, так this относится просто к функции, которая называется.

Answer 5

Использование функции this для доступа к элементу DOM возможно только в том случае, если функция была поднята Javascript event.

Внутри обработчика событий этот ссылается на текущий элемент.

Но это имеет смысл использовать, только если элемент (ы) содержит решающее значение, конкретные данные, которые мы должны выполнить функцию. Это также включает положение элемента внутри дерева DOM, его братьев и сестер, родителей и т. Д.

Вот простой пример (также Fiddle):

$(document).on('mouseenter', '[data-note]', showNote); 
 

 
function showNote() { 
 
    var thisDiv = $(this); 
 
    var thisNote = $('<div class="note">' + thisDiv.data('note') + '</div>'); 
 
    thisDiv.append(thisNote); 
 
    thisNote.fadeIn().delay(1000).fadeOut('normal', function() { 
 
     thisNote.remove(); 
 
    }); 
 
}; 
 

 
$('p').clone().appendTo('body');

body { 
 
    font-family: sans-serif; 
 
} 
 
[data-note] { 
 
    position: relative; 
 
    display: inline-block; 
 
    color: blue; 
 
} 
 
.note { 
 
    display: none; 
 
    background: none rgba(255, 255, 255, .8); 
 
    position: absolute; 
 
    right: -10px; 
 
    top: 10px; 
 
    padding: 5px; 
 
    border: 1px solid yellow; 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>This is some text <span data-note="Hallo there!">mouse over me</span> or <span data-note="How are you doing!">try me instead</span>.