Как добраться, где функция onclick называется javascript

Question

Кто-нибудь может дать мне синтаксис о том, как я могу определить, где было вызвано событие onclick.

Я хочу изменить содержимое h4 в зависимости от того, откуда пришел onclick

ex.если label () вызывается в «тканых значках», h4 innerhtml будет «ткаными значками», если label () вызывается в «тканых лентах», h4 innerhtml будет «ткаными лентами»

я хочу включитьэто только одна функция, а не создание одной функции для каждой категории, что я сейчас делаю с моим JavaScript ниже.как это можно создать в условиях if?

function label()
{   document.getElementsByTagName("h4")[0].innerHTML="badges";}


<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Labels</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#" onClick='label()'><div class="listlabel">Woven Badges</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven WaistBands</div></a></li>


<h4>Product Specification</h4>


        </ul>

Answer 1

Просто добавьте параметр в метку функции:

label(type)

И в своем html определите тип:

 <a href="#" onClick="label('badges')">Woven Badges</a>
 <a href="#" onClick="label('tapes')">Woven tapes</a>

И в своей метке функции выполните обработку для каждого типа.

PS: Вы не должны добавлять элемент 'div' в элемент 'a'

Answer 2

У вас есть контекст - this - в любом обработчике событий.Это связано с элементом, связанным с событием.Таким образом, вы можете сделать что-то вроде этого:

function my_handler(elem) {
  elem.href // contains href of anchor, eg '#Woven_WaistBands'
}

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_Tapes" onclick="my_handler(this); return false;"><span class="listlabel">Woven Tapes</span></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_WaistBands" onclick="my_handler(this); return false;"><span class="listlabel">Woven WaistBands</span></a></li>

<h4 id="Woven_Tapes">blah blah</h4>
<h4 id="Woven_WaistBands">...</h4>

Но лучше не повторять себя и привязывать обработчики к событиям, используя jQuery или нативный addEventListenet (сейчас это менее переносимый способ из-за IE).

Answer 3

Просто передайте this в качестве аргумента функции label(). Это ссылка на элемент, который инициировал событие. Затем вы можете легко найти нужную строку, взяв внутренний HTML первого дочернего элемента.

<script type="text/javascript">
function label(element) {
    document.getElementsByTagName("h4")[0].innerHTML=element.firstChild.innerHTML;
    return false;
}
</script>

<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Labels</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Badges</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven WaistBands</div></a></li>

<h4>Product Specification</h4>

Обратите внимание, что это хорошая идея - добавить возвращаемое значение в функцию label() и вернуть его при щелчке элемента. Это отменит действие браузера по умолчанию, что означает, что вы не получите этот неприятный # символ в вашем местоположении.

Answer 4

Добавьте параметр, и при вызове label () он передаст источник.Вы можете передать строку, как показано ниже, или вы можете передать сам якорь и использовать его с jquery для поиска дочерних элементов, которые вы изменяете.вам не нужно использовать jQuery, но в случае, если вы хотите, я показал вам пример ниже.

function label(source){
    $(source).find('h4').html('badges');
};

<a href... onClick='label(this)'>