使用jQuery显示/隐藏文章

Question

I'd like to create a menu that show's and hide's articles. Someone gave me this code, but for some reason its not working. It says "toon" is an undefined function in de element inspector.

What am I missing here?

$ (document). ready(function(){
     $ ('article').hide();
     var zichtbaar = $('article').first();
     zichtbaar.show();
     var toon = function(artikel) {
     zichtbaar.hide();
     zichtbaar = artikel;
     zichtbaar.show();
     };

     $('#menu a').click(function(event) {
     var ref = $(this).attr('href');
     toon(ref);
     event.preventDefault();
     });
});

Answer 1

I see problem, your function toon has to look like this:

var toon = function(artikel) {
   zichtbaar.hide();
   zichtbaar = $(artikel);
   zichtbaar.show();
};

You are sending through variable a #articleID, but you have to assign a jQuery object to use .show() method, so you have to wrap your #articleID into $()

Answer 2

Is that you are miss '#', I am assume that you "article" is a HTML ID

$ (document). ready(function(){
         $ ('#article').hide();//Add a #
         var zichtbaar = $('#article').first();////Add a #
         zichtbaar.show();
         var toon = function(artikel) {
            zichtbaar.hide();
            zichtbaar = artikel;
            zichtbaar.show();
         };

         $('#menu a').click(function(event) {
            var ref = $(this).attr('href');
            toon(ref);
            event.preventDefault();
         });
    });

Answer 3

You should add a jsfiddle to your code. Then we can better debug it for you. You have 2 problems in your code. (Edit: I apologize I didn't know that article was a HTML5 tag. Tech moves fast.)

Problem 1: .show(); of a child element reveals the entire parent element

$("#article").hide();
var zichtbaar = $("#article").first();
zichtbaar.show(); //when a child element is shown, the parent element is shown as well

Fiddle .

You .show();-ing your .first(); #article element is essentially revealing the parent element #article (hence revealing the rest of the child elements). What you could do is hide the child elements instead like this:

$(document).ready(function(){
    $("#articleholder article:not(#1)").hide(); //smart CSS
    //other codes below
});

Problem 2: Your function is undefined because of JavaScript hoisting

var toon = function(artikel) {
     zichtbaar.hide();
     zichtbaar = artikel; //all var declarations within functions like these hoist
     zichtbaar.show();
};

Your code above won't work because of javascript hoisting .

Due to hoisting, JavaScript engines will render your function as:

var toon = function(artikel) {
    var zichtbaar; //all variables in functions are hoisted to the top and declared like this
    zichtbaar.hide(); //at this point, zichtbaar is undefined. Hence the debugger says your function is undefined.
    zichtbaar = artikel; //all var declarations within functions like these hoist
    zichtbaar.show();
}

So instead you could do this:

$(document).ready(function(){
    $("#articleholder article:not(#1)").hide(); //smart CSS
    var toon = function(artikel) {
        $("#articleholder article").hide(); //we will hide everything so that future clicks will work as well
        artikel.show(); //greatly simplified.
    };

    $("#menu a").click(function(event){
        var ref = $(this).attr('href');
        toon($(ref)); //just plug in the jQuery object as the argument
    });
});

Here is your complete solution: Working fiddle .

Answer 4

In your toon() function the artikel parameter is a string you cannot do show() on a string. Also the function will never hide any element you should use toggle() to switch between visible/hidden states.

$(document).ready(function () {
    $('article').hide().first().show();//you can use chaining
    var toon = function (artikel) {
        $(artikel).toggle();
    };

    $('#menu a').click(function (event) {
        var ref = $(this).attr('href');
        toon(ref);
        event.preventDefault();
    });
});

WORKING DEMO

Note: Nothing wrong with $('article') because <article> is an html5 tag.