[英]How can I get this Javascript to work with multiple links on the same page?
As of right now, I am able to get this javascript function to work with one link. 截至目前,我能够使此javascript函数与一个链接一起使用。 However, I would like to use the function with multiple links.
但是,我想将该函数与多个链接一起使用。 I have changed
obj
to different values and have also tried using more than one function specified with different values for each to get a working prototype, but nothing seems to work. 我已经将
obj
更改为不同的值,并且还尝试使用多个为每个函数指定不同值的函数来获得可工作的原型,但是似乎没有任何效果。 Below is the javascript function from scratch, no changes. 以下是从头开始的javascript函数,没有任何更改。
<script type="text/javascript">
function gObj(obj) {
var theObj;
if(document.all){
if(typeof obj=="string") {
return document.all(obj);
}
else {
return obj.style;
}
}
if(document.getElementById) {
if(typeof obj=="string") {
return document.getElementById(obj);
}
else {
return obj.style;
}
}
return null;
}
</script>
And the link code: 以及链接代码:
<div id="axphsh">
<b>Phone:</b><a href="#" onClick="
gObj('axphsh').style.display='none';
gObj('axphhd').style.display='block';
return false;">Click for Phone Number</a></div>
<div id="axphhd" style="display:none">
<b>Phone:</b> 555-555-5555</div>
Ultimately what I want is to use the link code for multiple numbers on the same page, all hidden by default, then unhidden onClick
. 最终,我想要的是对同一页面上的多个数字使用链接代码,默认情况下全部隐藏,然后取消隐藏
onClick
。 But like I said, this only works for one phone number link, then if there are more specified on the same page, the onClick
event doesn't work at all. 但是就像我说的那样,这仅适用于一个电话号码链接,然后,如果在同一页面上指定了更多链接,则
onClick
事件根本不起作用。 I am thinking it has to do with getElementById
since div ids for links can be specified in that manner, but I am not completely sure. 我认为这与
getElementById
因为可以以这种方式指定链接的div ID,但我不确定。
You should learn some basic JS DOM manipulation. 您应该学习一些基本的JS DOM操作。
Why do you even use document.all
which is not a part of the standard? 您为什么甚至使用
document.all
而不是标准的一部分? Use document.getElementyById
or document.querySelector
. 使用
document.getElementyById
或document.querySelector
。
If all of your boxes with phone numbers were similar you could go with a more general function: 如果您所有带有电话号码的盒子都相似,则可以使用更通用的功能:
HTML : HTML :
<div class="phone-link-container">
<a href="#" class="show-phone-number">Click for phone number</a>
</div>
<div class="phone-number-container">555-555-555</div>
JS : JS :
function showNumber (e) {
var link = e.target,
link_container = e.target.parentNode,
phone_number = link_container.nextElementSibling;
link_container.style.display = 'none';
phone_number.style.display = 'block';
}
var numbers = document.querySelectorAll('.show-phone-number');
Array.prototype.forEach.call(numbers, function (el, i) {
el.addEventListener('click', showNumber);
});
It selects all elements with a class show-phone-number
and binds a function showNumber
to the click
event for each of them. 它选择具有
show-phone-number
类的所有元素,并将函数showNumber
绑定到每个showNumber
的click
事件。 This function hides parent of the link (which would be phone-link-container
in my example) and shows next sibling of the parent (which is phone-link-container
). 此函数隐藏链接的父级(在我的示例中为
phone-link-container
),并显示父级的下一个同级(即phone-link-container
)。
http://jsfiddle.net/9ZF9q/2/ http://jsfiddle.net/9ZF9q/2/
In case your JavaScript code is in head
you need to wrap all DOM manipulations inside window load
callback: 如果您的JavaScript代码在
head
,则需要将所有DOM操作包装在窗口load
回调中:
window.addEventListener("load", function () {
var numbers = document.querySelectorAll('.show-phone-number')
Array.prototype.forEach.call(numbers, function (el, i) {
el.addEventListener('click', showNumber);
});
});
You can read more on functions used there on https://developer.mozilla.org/en-US/docs/DOM/Element.nextElementSibling 您可以在https://developer.mozilla.org/zh-CN/docs/DOM/Element.nextElementSibling上阅读有关此处使用的功能的更多信息。
When it comes to DOM manipulation if you want to keep the compatibility with all older browsers it's easier to use jQuery library - especially if you're a beginner. 当涉及到DOM操作时,如果您想保持与所有旧版浏览器的兼容性,那么使用jQuery库会更容易-尤其是如果您是初学者。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.