0

現時点では、この JavaScript 関数を 1 つのリンクで動作させることができます。ただし、複数のリンクで機能を使用したいと考えています。私は異なる値に変更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>

最終的に私が望むのは、同じページの複数の番号にリンクコードを使用することです。デフォルトではすべて非表示になり、次に unhidden になりonClickます。しかし、私が言ったように、これは 1 つの電話番号リンクに対してのみ機能し、同じページに複数の指定がある場合、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バインドします。この関数は、リンクの親 (私の例ではそうです) を非表示にし、親の次の兄弟 (これは です) を表示します。showNumberclickphone-link-containerphone-link-container

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

JavaScript コードが含まれている場合は、すべての DOM 操作をウィンドウコールバックhead内にラップする必要があります。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 に答える