Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Получение места вызова функции внутри этой функции (https://javascript.ru/forum/events/49745-poluchenie-mesta-vyzova-funkcii-vnutri-ehtojj-funkcii.html)

eucalipt 27.08.2014 01:14

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

Итак, имеются четыре кнопки:

<section class="right" id="nav">
	<div id="b1" onmouseover="test()">Кнопка 1</div>
	<div id="b2" onmouseover="test()">Кнопка 2</div>
	<div id="b3" onmouseover="test()">Кнопка 3</div>
	<div id="b4" onmouseover="test()">Кнопка 4</div>
</section>


Нужно изменить цвет кнопки при наведении, НО сделать это нужно через отдельную функцию, в моем случае, это "test()". Проблема в том, что "this.", если его вызвать непосредственно в функции, а не просто после "onmouseover" не хочет работать и выдает ошибку в отладчике :(

У меня появилась такая идея. А что, если я получу место вызова внутри этой функции, то есть какой-то код внутри функции "test()" укажет мне, какая из кнопок вызвала ее, путем возвращения ID. То есть b1 или b2 и так далее. И, зная ID, при помощи простой сортировки путем использования конструкции if () {//код}, я бы добился нужного результата.

Пытался сделать это при помощи

var t = event.target;
alert(t.className); // пока что alert, это для проверки


Но с "t.Id" это не получается.

Может кто-то предложит иной вариант или дополнит мой?

Vlasenko Fedor 27.08.2014 01:26

<section class="right" id="nav">
  <div id="b1" onmouseover="test(this)">Кнопка 1</div>
  <div id="b2" onmouseover="test(this)">Кнопка 2</div>
  <div id="b3" onmouseover="test(this)">Кнопка 3</div>
  <div id="b4" onmouseover="test(this)">Кнопка 4</div>
</section>
<script>
  function test(el) {
    console.log(el.id);
  }
</script>

eucalipt 27.08.2014 01:30

Спасибо большое. Но еще такой вопрос. Этот console.log я могу вывести в отдельную переменную? И потом работать с ней как с обычными данными?

eucalipt 27.08.2014 01:51

Решение оказалось простым до не могу. Аж самому смешно стало.
Оценив решение Poznakomlus'a пришел к выводу, что получить ID можно просто посредством
el.id
И все. А вывести его уже можно при помощи
alert(el.id);
Но задача у меня не в выводе.
Пользуйтесь, может кому и пригодится ;)
А Poznakomlus апнул карму и передаю огромное спасибо за наводку!

Erolast 27.08.2014 09:13

А еще можно так:
<section class="right" id="nav">
  <div id="b1" onmouseover="test.call(this)">Кнопка 1</div>
  <div id="b2" onmouseover="test.call(this)">Кнопка 2</div>
  <div id="b3" onmouseover="test.call(this)">Кнопка 3</div>
  <div id="b4" onmouseover="test.call(this)">Кнопка 4</div>
</section>
<script>
  function test() {
    alert(this.id);
  }
</script>

С помощью метода call, который есть у любой функции (да-да, функции в js - тоже объекты), можно вызвать эту функцию в определенном контексте.


Часовой пояс GMT +3, время: 06:05.