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

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'); ?>