Question

我有一个语言选择器的jQuery下拉列表。目前我有一个如何工作的骨架设置，但我很惊讶如何启动活动的jQuery函数。

我希望它能做的是当用户点击列表中的语言时，语言名称（或将来的标志）将显示在“当前div类”的顶部。

当前类中的默认值将是英语列表项。

我不确定如何开始这个但是从研究中我发现我可以创建if statement并使用append/prepend元素？我正朝着正确的方向前进吗？

我正在使用Codeigniter并创建了一个语言翻译器，因此在拥有html锚标签的内部我的php是这样编写的：

<li id="french"><?php echo anchor('fr/'.strtolower($page_info['fr_title']), 'FR'); ?></li>

这是一个关于当前如何设置的粗略原型的链接。任何教程或指导都将不胜感激。

如果语言是法语，则显示法国国旗等等：

$(function() {
    if ( document.location.href.indexOf('en') > -1 ) {
        alert('english');
    } else {
        if ( document.location.href.indexOf('ru') > -1 ) {
            alert('russian');
        }else {
            if ( document.location.href.indexOf('fr') > -1 ) {
                alert('french');
            }else {
                if ( document.location.href.indexOf('fr') > -1 ) {
                    alert('french');    
                    }
                }
            }
        }
    });

谢谢！

链接：http://jsfiddle.net/Wmb4n/2/

Answer 1

检查此fiddle

$('#lang_selector ul li').click(function () {
    $('.current').text($(this).text());    
});

编辑：您的if.. else语句需要清理。

$('#lang_selector ul li').click(function () {
    $('.current').text($(this).text());
var loc = document.location.href;
    if (loc.indexOf('en') > -1) {
        alert('english');
    } else if (loc.indexOf('ru') > -1) {
        alert('russian');
    } else if (loc.indexOf('fr') > -1) {
        alert('french');
    } else if (loc.indexOf('fr') > -1) {
        alert('french');
    }
});

Answer 2

不确定这是否是你想要的......

尝试一下..

 $(document).ready(function(){
    $('.current').click(function(){
    $(this).siblings('ul').slideToggle();
});
    $('ul li').click(function(){
      $(this).parent().prev('span').text($(this).text());
    });
});

fiddle here

Answer 3

好的 user1671639 回答了我上面的问题，但另一个问题是该页面刷新了新的语言内容，这意味着所选的div在页面加载之前闪烁。我也试过$('#lang_selector ul li').click(function (e) { $('.current').text($(this).text()); e.preventDefault(); });

使所选项目保持活动状态，但不会刷新包含语言内容的页面。

我不确定这是否是正确的方法，但是如果有人能想到一个更好的简单解决方案。

我添加了一个指向我脚本的链接，但是不能用作图像，而且不包含php。基本上，当用户选择列表中的图标时，页面会刷新，然后jQuery检查URL是否有fr或en ect，如果是，则将li id = french与图像一起附加到当前跨度上。

链接：http://jsfiddle.net/Wmb4n/7/

这有效：

$(function() {
    var loc = document.location.href;

        if (loc.indexOf('en') > -1) {
            $("span.current").append(english);

        } else if (loc.indexOf('ru') > -1) {
            $("span.current").append(russian);

        } else if (loc.indexOf('fr') > -1) {
            $("span.current").append(french);

        } else if (loc.indexOf('de') > -1) {
            $("span.current").append(german);
        }
    });

要更改锚标记中的语言翻译，请执行以下操作：

<?php echo anchor('fr/'.strtolower($page_info['fr_title']), 'FR'); ?>

选择列表项时的jQuery，添加到当前类div

3 个答案: