2

わかりましたので、私はこれに取り組んできましたが、少し助けを求めることにしました。

ID の show1 と show2 を持つ 2 つの段落があります。

それぞれの上にあるリンクをクリックすると展開される短いテキストがあります。

私の関数は展開したり折りたたんだりするように機能しますが、リンクの値、より正確には、「リンクがnull」になるため、リンクテキストを取得できないように感じます。

それは var status と innerHTML までずっと機能します。これらの 2 行をコメントアウトすると機能します。リンク テキストを表示から非表示に変更することはありません。感謝。

/* Function created by "Simon Willson" to be able to 
call several functions with a single event */

//Create the function
function addLoadEvent(func) {
//Create a variable for window.onload event
var oldonload = window.onload;
//If window.onload is NOT a function, then assign 'func' to window.onload
if (typeof window.onload != 'function') {
    window.onload = func;
//If window.onload already is a function then make a new function
} else {
    window.onload = function() {
    //To do what the old onload function did
    if (oldonload) {
    oldonload();
    }
    //then do whatever the new function does 
    func();
    }
}
}

function newLink() {
    //Make a few safety check to see if the browser can handle the elements
    if (!document.getElementById) {
        if (!document.createElememt) {
            if (!document.createTextNode) {
                return false;
            }
        }
    }
    //Create the link
    newLinkElement = document.createElement('a');
    //Give the link a Id
    newLinkElement.id = 'show1_link';
    //Set the href
    newLinkElement.href = "javascript:showHide(this.id,'show1')";
    //Create a variable for the link text
    var linkText = document.createTextNode('Visa mera information');
    //Append the text to the link
    newLinkElement.appendChild(linkText);
    //Create a variable for the paragraph
    var elem = document.getElementById('show1')
    //Insert the text before the paragraph with the Id show1
    elem.parentNode.insertBefore(newLinkElement,show1);
}
addLoadEvent(newLink);

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
    text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}
4

2 に答える 2

0

関数showHideで：

function showHide(link_id,elemId) {
    var link = document.getElementById(link_id);
    var text = document.getElementById(elemId);
  //  text.style.display = (text.style.display == 'block') ? 'none' : 'block';
    var status = (text.style.display == 'block') ? 'none' : 'block';
    text.style.display = status;
    link.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}

text.style.displayを2回設定しています。上でコメントした行を削除します。

私はおそらくこれを次のように書くでしょう：

function showHide (linkEl, textEl) {
  var status;
  typeof linkEl === 'string' && (linkEl = document.getElementById (linkEl));
  typeof textEl === 'string' && (textEl = document.getElementById (textEl));

  if (textEl) {
    textEl.style.display = (status = (textEl.style.display === 'block')) ? 
                             'none' : 'block';
    linkEl && (linkEl.innerHTML = status ? 
                             'Dölj information' : 'Visa mera information');
  }
}

これにより、要素のIDまたは要素自体のいずれかを使用してshowHideを呼び出すことができます。また、要素の存在をチェックし、要素が見つからない場合は何もしません。

完全に機能する例については、http：//jsfiddle.net/CgnXL/を参照してください。

于 2012-10-21T16:38:30.463 に答える
0

私はあなたの両方のコード例をいじってみましたが、結局やった

//Create the function
function addLoadEvent(func) {
//Create a variable for window.onload event
var oldonload = window.onload;
//If window.onload is NOT a function, then assign 'func' to window.onload
if (typeof window.onload != 'function') {
    window.onload = func;
//If window.onload already is a function then make a new function
} else {
    window.onload = function() {
    //To do what the old onload function did
    if (oldonload) {
    oldonload();
    }
    //then do whatever the new function does 
    func();
    }
}
}
//Add as many functions you like with addLoadEvent(functionName);


/* Create the object hideParagraph, showOrHide using singleton
method, this way the instance only occur once and not globaly, 
then called using (function()ObjName.functionName('classNameHere'));*/

//Create the global variable
var hideParagraph = {
//Create the private function for the hidden function
hideText: function() {
    //Make a few safety checks to see if the browser can understand the code
    if (!document.getElementsByTagName) {
        if (!document.getAttribute) {
        return false;
        }
    }
    //Make a variable to get tag names with a wildcard
    var elements = document.getElementsByTagName('*');
    //Make the loop
    for (var i = 0; i < elements.length; i++) {
        //If it belongs to the class show
        if (elements[i].getAttribute('class') == 'show') {
        //Then hide it
        elements[i].style.display = 'none';
        }
    }
}
}
addLoadEvent(hideParagraph.hideText);


//Create the global variable
var showOrHide = {
//Create the private function for the link
createLinks: function(nodeClass) {
    //Make a few safety checks to see if the browser can understand the code
    if (!document.getElementsByClassName) {
        if (!target.parentNode) {
            if (!document.createElement) {
            return false;
            }
        }
    }
    //Get all the nodes of a class
    var nodes = document.getElementsByClassName(nodeClass);
    //Make the loop
    for (var i = 0; i < nodes.length; i++) (function(i) {
        //Make a variable for the nodes
        var target = nodes[i];
        //Create the link element
        var a = document.createElement('a');
        //Prevent the page from ever refeshing on click
        a.href = 'javascript:void(0)';
        //Set the link text
        a.innerHTML = 'Visa mera information';
        //Set the click function for the link
        a.onclick = function() {
            /* Call the global variable showOrHide with the function     showHide 
                using this link and it's target, the variable we made for nodes[i] */
            showOrHide.showHide(this, target);
        }
        //Get the parent node, in this case the parent is 'post'
        var parent = target.parentNode;
        /* Insert the link (a) before it's target (nodes[i]) element, the target
            node, the node is set when you call the function */
        parent.insertBefore(a, target);
    //Close the loop and then close up and end with the function name (i)
    })(i);
/* Close the createLinks function and after put a punctuation mark , 
    that mark separates one function from another in a singleton method */
},
//Another private function
showHide: function(trigger, target) {
    //Set the toggle option
    var status = (target.style.display == 'block') ? 'none' : 'block';
    //Depending on what the status is
    target.style.display = status;
    //Change the link text accordingly
    trigger.innerHTML = (status == 'block') ? 'Dölj information' : 'Visa mera information';
}
}
addLoadEvent(function() { showOrHide.createLinks('show')});

1 つのクラスで必要な数の段落を非表示にするための完全で機能するコード例を共有し、ループして、自分で定義したクラスで段落と同じ数のリンクを作成し、それらをその要素の上に配置します。最初のaddLoadEventスクリプトを除いて、すべてシングルトンメソッドを使用しています。おそらく他の誰かを助けるでしょう:)

于 2012-10-24T18:12:10.823 に答える