jQuery переключает скрытую проблему с несколькими именами слов - PullRequest
Новая
       18

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

0 голосов
/ 01 марта 2011

У меня есть функция, которая переключает скрытые дивы и прекрасно на них работает. к сожалению, раздел «бренд» изменился на «бренд». код был любезно улучшен и написан динамически одним из ваших гениев и использует имя содержимого якоря, чтобы выбрать 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);
});

Ответы [ 4 ]

1 голос
/ 01 марта 2011

ну просто поменяй

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

до

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

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

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

1 голос
/ 01 марта 2011

Два способа мыслить:

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);
});
0 голосов
/ 01 марта 2011

попробуйте что-то вроде: 

var $content = $('div[id="' + id + '"]:not(:visible)');
0 голосов
/ 01 марта 2011

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

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

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

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

Это регулярное выражение заменит все до последнего пробела, оставляя последнее слово (протестировано с THE THE BRAND)

...