Question

任何人都可以告诉我如何确定调用onclick事件的位置。

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

离。如果在“编织徽章”中调用label（），h4 innerhtml将是“编织徽章” 如果在“编织磁带”中调用label（），h4 innerhtml将是“编织磁带”

我希望将其合并到一个函数中，而不是实际为每个类别创建一个函数，我目前正在使用下面的javascript。如何在条件下创建它？

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：你不应该添加＆＃39; div＆＃39;元素在＆＃39; a＆＃39;元件

Answer 2

添加参数，当调用label（）时，它将传递源。您可以传递一个字符串，如下所示，或者您可以传递锚本身并将其与jquery一起使用以查找您正在修改的子项。你不必使用jQuery，但如果你想我给你看一个例子如下。

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

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

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

您在任何事件处理程序中都有上下文 - 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，现在这种方式不太方便）。

如何获得onclick函数称为javascript

4 个答案: