如何获取onclick函数被称为javascript的位置

Question

谁能告诉我如何确定onclick事件被调用的位置。

我想根据onclick来自哪里来更改h4内容

例如。如果在“编织的徽章”中调用label()，则h4 innerhtml将是“编织的徽章”。如果在“编织的磁带”中调用label()，则h4内部的will将是“编织的磁带”。

我想把它合并到一个函数中，而不是像我现在用下面的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

只需将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 2

只需在函数标签中添加参数：

label(type)

并在html中定义类型：

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

在您的函数标签中，对每种类型进行处理。

PS :您不应该在'a‘元素中添加'div’元素

Answer 3

添加一个参数，当调用label()时，它将传递源代码。您可以像下面这样传递一个字符串，也可以传递锚点本身并将其与jquery一起使用，以查找您正在修改的子项。您不必使用jQuery，但如果您愿意的话，我在下面给您展示了一个示例。

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

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