jQuery使用多个单词名称切换隐藏的div问题答案

【问题标题】：jQuery toggling hidden div issue with multiple word namesjQuery使用多个单词名称切换隐藏的div问题
【发布时间】：2011-07-06 06:27:00
【问题描述】：

我有一个功能可以切换隐藏的 div 并且可以很好地使用它。不幸的是，“品牌”部分刚刚更改为“品牌”。代码由你们中的一位天才慷慨地改进和动态编写，并使用锚的内容名称来选择要显示/隐藏的 div。不幸的是，我需要（空间）品牌。没有bueno！

想法？谢谢！

附言如果您将 THE 从“show_brand”锚中取出，此功能将起作用。

HTML：

    <div id="nav">
        <div id="nav_left">
            <a class="home" id="show_brand" title="BRAND">THE BRAND</a><br />
            <a class="home" id="show_campaigns" title="CAMPAIGNS">CAMPAIGNS</a><br />
            <a href="collection/" title="COLLECTION">COLLECTION</a><br />
            <a class="home" id="show_inquiries" title="INQUIRIES">INQUIRIES</a>
        </div>
        <div id="campaigns">
            <a href="campaigns/neo_balletto/" title="NEO BALLETTO">NEO BALLETTO</a><br />
            <a href="campaigns/poetic_deco/" title="POETIC DECO">POETIC DECO</a>
        </div>
    </div>
    <div class="current" id="brand">
        <p>content</p> 
    </div>
    <div id="inquiries">
        <p>content</p>
    </div>

Javascript：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

【问题讨论】：

标签： jquery dynamic html toggle anchor

【解决方案1】：

改变一下

var id = $(this).html().toLowerCase();

到

var id = $(this).attr("id").replace("show_","").toLowerCase();

无论 div 的内容是什么，你的代码都可以工作

查看http://jsfiddle.net/3AnZw/1/ 以获取演示

【讨论】：

成功了。我遇到了下划线切换的问题。当单击一个到另一个时，它会切换到其他菜单项，但在单击 .close 类或活动 div 的名称时不会消失。想法？问题发布在这里：stackoverflow.com/questions/5149609/…
好吧，我确实阅读了这个问题，但无法真正理解您的要求
啊，我以为我昨晚更新了问题，但我真的没有。只是使问题更加具体和清晰。如果你有时间，我会喜欢你的洞察力。你似乎有一个清晰的认识——我没有！

【解决方案2】：

我能想到的两种方法：

1) 使用 title 属性导航到 DIV 并切换可见性。即：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).attr("title").toLowerCase(); // note the change from html to attr("title")
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

2) 将div的id从brand改为the_brand，使用下面的JS：

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).html().toLowerCase().replace(/\s/g, "_"); //Replace spaces with _ got ID
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
});

【讨论】：

【解决方案3】：

如果您可以将id品牌更新为“the_brand”，那么您可以添加

var id = $(this).html().toLowerCase().replace(' ', '_');

即用ID中的下划线替换空格来选中它。如果这不是一个选项，而您只想始终使用最后一个词，请执行以下操作：

var id = $(this).html().toLowerCase().replace(/.* /, '');

这个正则表达式将替换所有内容，直到最后一个空格留下最后一个单词（用 THE BRAND 测试）

【讨论】：

【解决方案4】：

尝试类似：

var $content = $('div[id="' + id + '"]:not(:visible)');

【讨论】：