jQuery переключение скрытой проблемы с несколькими именами слов

Question

У меня есть функция, которая переключает скрытые div и прекрасно работает на ней. к сожалению, раздел «бренд» просто изменился на «бренд». код был благосклонно улучшен и написан динамически одним из ваших гениев и использует имя содержимого анкера для выбора div для отображения/скрытия. К сожалению, мне нужен (пробел) БРЕНД. Нет буено!

Идеи? Спасибо!

p.s. эта функция работает, если вы вынимаете 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); 
}); 

Answer 1

Ну просто изменить

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

к

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

И ваш код не будет работать, независимо от того, что содержание DIV является

Проверить http://jsfiddle.net/3AnZw/1/ для демо

Answer 2

Если вы можете обновить бренд идентификатор "the_brand", то вы можете просто добавить

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

То есть, заменить пробелы с символами подчеркивания в ID, чтобы выбрать его. Если это не вариант, и вы просто хотите, чтобы всегда использовать последнее слово, сделайте следующее:

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

Это регулярное выражение заменит все до последнего места оставляя последнее слово (протестировано с БРЕНДА)

Answer 3

Два способа, о которых я могу думать:

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 от бренда 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 4

попробовать что-то вроде:

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