0

截至目前，我能够让这个 javascript 函数与一个链接一起工作。但是，我想使用具有多个链接的功能。我已更改obj为不同的值，并且还尝试使用为每个函数指定不同值的多个函数来获得工作原型，但似乎没有任何效果。下面是从头开始的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>

和链接代码：

<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>

最终我想要的是在同一页面上使用多个数字的链接代码，默认情况下全部隐藏，然后取消隐藏onClick。但就像我说的，这只适用于一个电话号码链接，那么如果同一页面上有更多指定，则该onClick事件根本不起作用。我认为这与getElementById可以以这种方式指定链接的 div id 有关，但我不完全确定。

4

1 回答 1

0

你应该学习一些基本的 JS DOM 操作。

为什么你甚至使用document.all不属于标准的部分？使用document.getElementyById或document.querySelector。

如果您的所有电话号码框都相似，您可以使用更通用的功能：

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：

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);
});

它选择具有类的所有元素show-phone-number并将函数绑定showNumber到click每个元素的事件。此函数隐藏链接的父级（phone-link-container在我的示例中）并显示父级的下一个兄弟（即phone-link-container）。

http://jsfiddle.net/9ZF9q/2/

如果您的 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);
  });
});

您可以在https://developer.mozilla.org/en-US/docs/DOM/Element.nextElementSibling上阅读更多关于那里使用的功能

当涉及到 DOM 操作时，如果您想保持与所有旧浏览器的兼容性，那么使用 jQuery 库会更容易——尤其是如果您是初学者。

于 2013-01-16T23:56:28.520 回答