Доступ к свойствам html-элемента внутри функции javascript с помощью $ (this) дает неопределенный

Question

Я вызываю функцию test() для тега привязки следующим образом: -

<a class="link" onclick="test();">Hello</a>

И я пытаюсь получить доступ к классу привязки внутри функции test (): -

function test()
{
  alert($(this).attr("class"));
}

Но это оповещения undefined.Я знаю, что вместо этого вызов onclick=test(this); и наличие следующей функции: -

function test(obj)
{
  alert($(obj).attr("class"));
}

Но я хотел получить доступ к свойствам элемента (для которого вызывается функция), не передавая this,Просто сможете get / set свойства элемента (для которого вызывается функция).Является ли это возможным?Как это сделать?

Answer 1

this - это «Объект, для которого была вызвана эта функция», поэтому для foo.test(), this - это foo внутри test. Если вы не укажете объект, по умолчанию он будет window, поэтому в вашем коде this === window, поскольку вы вызываете (неявно) window.test().

Забудьте о внутренних атрибутах событий. Они безобразны и не поддаются ненавязчивому JavaScript .

Вместо этого используйте JavaScript для назначения обработчиков событий. jQuery, который вы уже используете, предоставляет несколько способов сделать это, включая click. В качестве аргумента передайте функцию, которую вы хотите вызвать.

jQuery('.link').click(test);

Когда срабатывает событие click, теперь оно будет вызывать что-то похожее на HTMLElementNode.test() вместо HTMLElementNode.onclick(), поэтому this будет тем, что вы хотите.

Answer 2

В этом сценарии нам нужно убедиться, что HTML-элемент владеет той функцией, которую вы хотите вызвать при нажатии. Что вы на самом деле делаете, так это то, что вы используете атрибут onclick, который просто принимает string параметр и совершенно не замечает всего остального.

Чтобы сделать HTML-элемент владельцем функции, вам необходимо отобразить свойство onclick полностью с вашей собственной пользовательской функцией. В JavaScript вы делаете это так

element.onclick = doSomething;

Так что наш код будет выглядеть примерно так:

<div id="element">Click</div>
<script>
function doSomething(){
    this.style.color= "#000000"
}
document.getElementById("element").onclick = doSomething;
</script>

вот рабочий пример http://www.jsfiddle.net/VMCmb/1/.

Также, пожалуйста, посмотрите на http://www.quirksmode.org/js/this.html.

Answer 3

Вы также можете использовать этот метод -

Передать это как параметр -

<a class="link" onclick="test(this);">Hello</a>

Код запроса будет -

function test(obj)
{
  alert($(obj).attr("class"));
}

Answer 4

Потому что «this» - это специальная свободная переменная в Javascript: она связана с контекстом вызывающей стороны. Прохождение этого - лучший и более безопасный способ выполнения работы.