Question

我想创建一个显示隐藏文章的菜单。有人给了我这个代码，但由于某种原因它不起作用。它说＆＃34;香椿＆＃34;是de element inspector中的未定义函数。

我在这里缺少什么？

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

我看到问题，你的函数toon必须如下所示：

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

您正在通过变量发送一个#articleID，但您必须指定一个jQuery对象才能使用.show（）方法，因此您必须将#articleID包装到$（）

中

Answer 2

您是否想念'＃'，我假设您“文章”是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

您应该在代码中添加jsfiddle。然后我们可以为您更好地调试它。您的代码中有2个问题。（编辑：我很抱歉，我并不知道article是HTML5标签。技术快速移动。）

问题1：.show（）;一个子元素显示整个父元素

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

Fiddle

你.show（）; - 你的.first（）; #article元素基本上揭示了父元素#article（因此揭示了其余的子元素）。您可以做的是隐藏子元素，如下所示：

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

问题2：由于JavaScript提升，您的功能未定义

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

由于javascript hoisting，您上面的代码无法正常工作。

由于提升，JavaScript引擎会将您的功能呈现为：

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

所以你可以这样做：

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

以下是您的完整解决方案：Working fiddle。

Answer 4

在toon()函数中，artikel参数是一个字符串，您无法对字符串执行show()。此功能永远不会隐藏您应该使用toggle()在可见/隐藏状态之间切换的任何元素。

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

注意：$('article')没有错，因为<article>是html5标记。

用jquery显示/隐藏文章

4 个答案: