2

我有以下内容，如果有人可以提供帮助，那就太好了..

    $(".brand-nav").click(function(e){
        var type = $(this).attr( id );
        $('.article').hide();
        $('.' + type).show();            
        e.preventDefault();            
        $(".letter-section").each(function (i) {
            var siblings = $(i).siblings(":visible").length;
            if (siblings == 0) {
                $(i.big-lettter').hide();
            } else {
                $(i.big-lettter').show();
            }
        }
    });

我已经制作了这个 JS 小提琴以包含 HTML 的想法：http: //jsfiddle.net/BEa4x/当我在这里发布它时它的格式不正确。

当您单击顶部菜单时，它应该隐藏所有链接，然后仅通过链接 ID 显示相关链接。

如果然后您单击食物，这意味着“A”部分中没有可见的链接，因此我也需要隐藏 A，否则应该显示它。

任何帮助表示赞赏:-)

4

2 回答 2

3

好的，那里有一些语法错误......还有一些逻辑错误。尝试这个：

 $(".brand-nav").click(function(e) {
     var type = $(this).attr('id'); // id needs quotes
     $('.article').hide();
     $('.' + type).show();            
     e.preventDefault();            
     $(".letter-section").each(function (i) {
         var siblings = $(this).find('li').filter(':visible'); // i is the index, "this" is the actual DOM element. Also you need the descendants 'li', not his siblings
         if (siblings.size() == 0) {
             $(this).children('.big-letter').hide(); // again, use "this" and get the children (you may want to filter the first also).
         }
         else {
             $(this).children('.big-letter').show(); // remember to show again or it will stay hidden :)
         }
     }); // you also forgot to close this bracket
 });

小提琴：http: //jsfiddle.net/BEa4x/21/

于 2012-10-23T10:43:37.370 回答
0 
$(document).ready(function() {
    $(".brand-nav").click(function(e){
        e.preventDefault();            

        // Note that id has to be quoted here.
        var kind = $(this).attr('id');

        // First of all show all the letters
        // in case they had been hidden previously
        $('.letter-section').show();

        // Hide all the articles and only show the ones that
        // match the id of the element that's been clicked on.
        $('.article').hide();
        $('.' + kind).show();

        // For each letter section...
        $('.letter-section').each(function(index, element) {
            // Check if its visible li count is 0
            if ($(element).contents('li:visible').length == 0) {
              // If it is, hide the letter!
              $(element).hide();   
            }
        });
    });    
});

你可以看到它在这里工作：http: //jsfiddle.net/BEa4x/23/

这是对您的代码的快速而肮脏的修复，如果我是您，我会重构它，首先将字母部分内容检查放入其自己的函数中。

于 2012-10-23T10:53:19.527 回答