jQuery условно изменяет события в зависимости от значений .html ('string') - PullRequest
Новая
       13

jQuery условно изменяет события в зависимости от значений .html ('string')

0 голосов
/ 07 декабря 2011

http://jsfiddle.net/motocomdigital/Qh8fL/4/

Пожалуйста, не стесняйтесь менять заголовок, если вы думаете, что я неправильно его сформулировал.

Общее

Я управляю сайтом WordPress с многоязычным управлением. И мое меню / навигация динамическая, управляется через администратора WordPress. Многоязычный плагин языка также изменяет динамическое меню / содержимое навигации, а также содержимое страницы.

Кнопка

My Contact , находящаяся в динамической навигации, открывает скользящее меню с помощью jQuery. Очень простая анимация с использованием Top CSS. Кнопка контакта находится на странице дважды, поэтому я не использую .toggle для итераций. См. JsFiddle .

Сценарий 

var $button  = $(".contact-button"),
    // var for button which controls sliding div
    $slide   = $("#content-slide");
    // var for the div which slides up and down

$button.on('click', function () {
    // function for when button is clicked

    if ($button.html() == 'Close') {
        // run this if button says 'Close'

        $slide.stop().animate({ top: "-269px" }, 300);
        // close slide animation
        $button.html('Contact');
        // change text back to 'Contact'


    } else {
        // else if button says Contact or anything else

        $slide.stop().animate({ top: "0" }, 300);
        // open slide animation
        $button.html('Close');
        // change text to 'Close'
    }
});

Задача

Потому что я работаю на нескольких языках на сайте. Правописание навигации меняется. См. Кнопки флага jsFiddle, например . Это нормально, анимация все еще работает нормально, потому что она использует класс кнопки «contact-button».

Но поскольку я использую .html, чтобы заменить текст кнопки на «Закрыть», а затем на второй итерации, вернуться к «Контакту» - очевидно, это проблема для других языков, поскольку она всегда меняется Английский «закрыть» и вернуться к английскому «Контакт»

Но три моих языка и слова, через которые мне нужно пройти, - это ...

Контакт - Закрыть
Контатто - Черка
Contacto - Chiudere

Может ли кто-нибудь помочь мне расширить мой сценарий для размещения трех языков, все мои попытки потерпели неудачу. jsFiddle имеет скрипт.

Функциональность языка в скрипте предназначена только для демонстрационных целей, поэтому последовательность итераций можно проверить с самого начала. Я понимаю, что если вы смените язык во время открытия меню (в скрипке), это приведет его в замешательство. Но когда язык меняется на моем сайте, обновляется вся страница, которая закрывает слайд и сбрасывает последовательность. Так что не важно.

Любая профессиональная помощь будет потрясающей, спасибо !!!

Моя бедная попытка, но вы можете видеть то, что я пытаюсь достичь 

var $button  = $(".contact-button"),
    // Var for button which controls sliding div
    $slide   = $("#content-slide");
    // Var for the div which slides up and down

$button.on('click', function () {
    // function for when button is clicked

    if ($button.html() == 'Close' || 'Cerca'|| 'Chiudere' ) {
        // run this if button says Close or Cerca or Chiudere

        $slide.stop().animate({ top: "-269px" }, 300);
        // Close slide animation

        $(function () {
            if ($button.html(== 'Close') {
                $button.html('Contact'); }
            else if ($button.html(== 'Cerca') {
                $button.html('Contatto'); }
            else ($button.html(== 'Chiudere') {
                $button.html('Contacto'); }
        });
        // Change text back to Contact in correct language

    } else {
        // else if button says Contact or anything else

        $slide.stop().animate({ top: "0" }, 300);
        // Open slide animation

        $(function () {
            if ($button.html(== 'Contact') {
                $button.html('Close'); }
            else if ($button.html(== 'Contatto') {
                $button.html('Cerca'); }
            else ($button.html(== 'Contacto') {
                $button.html('Chiudere'); }
        });
        // Change text back to Close in the correct language

    }
});

См. Мой скрипт попытки выше, который не работает на этом jsFiddle .

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Вы никогда не должны зависеть от строк меток ... особенно в многоязычной среде.Вместо этого вы должны использовать заполнители, которые вы храните в атрибуте (возможно, используя .data()).Затем вы пишете свои собственные установщики для меток в зависимости от значения атрибута. 

var myLabels = {'close': ['Close', 'Cerca', 'Chiudere'], 'contact' : ['Contact', 'Contatto', 'Contacto']};

var currLang = 2; // to select italian

....

// to set the label
$button.data('mylabel', 'close');
$button.html(myLabels['close'][currLang]);
....

if($button.data('mylabel') == 'close') {
    $button.data('mylabel', 'contact');
    $button.html(myLabels['contact'][currLang]);
} else {
    $button.data('mylabel', 'close');
    $button.html(myLabels['close'][currLang]);
}
0 голосов
/ 07 декабря 2011

Вот рабочий пример: http://jsfiddle.net/Qh8fL/2/

Когда нажимается одна из языковых кнопок, она сохраняет строки для Contact и Close, используя метод jQuery .data().Затем, когда нажимается кнопка контакта / закрытия, она обращается к этим строкам, а не к их жесткому кодированию.

Вот соответствующие строки кода: 

$("#english").click(function() {
    $(".contact-button").html('Contact').data('langTxt',{contact:'Contact',close:'Close'});
});

$("#spanish").click(function() {
    $(".contact-button").html('Contatto').data('langTxt',{contact:'Contatto',close:'Close'});
});

$("#italian").click(function() {
    $(".contact-button").html('Contacto').data('langTxt',{contact:'Contacto',close:'Close'});
});

if ($button.html() == 'Close') {
    //...
    $button.html($button.data('langTxt').contact);
} else {
    //...
    $button.html($button.data('langTxt').close);
}

Все, что вам нужноЧтобы правильно изменить текст «close», нужно отредактировать свойство close внутри вызовов к data(), которые происходят в каждом из событий щелчка.

...