jQuery 切换隐藏的 div 问题与多个单词名称

Question

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

有想法吗？谢谢你！

ps 如果您从“show_brand”锚点中取出 THE，则此功能有效。

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

Answer 1

那么只需将

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

更改为

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

并且无论 div 的内容是什么，您的代码都会工作

检查 http://jsfiddle.net/3AnZw/1/ 进行演示

Answer 2

我能想到的两种方法：

1）使用标题属性导航到 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);
});

Answer 3

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

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

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

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

此正则表达式将替换最后一个空格之前的所有内容，留下最后一个单词（使用 THE THE BRAND 进行测试）

Answer 4

尝试类似的东西：

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