0

我正在使用我在谷歌上找到的预制列表构建一个国家选择器，以及一种在 roberkules 发布在 stackoverflow 上的 png 精灵上精确定位标志的智能方法（http://stackoverflow.com/questions/5409780/html-country -list-with-flags）。

我是初学者，尽管我了解每个部分的工作原理，但我不明白如何“让”jQuery 读取 ISO 代码，然后将其应用于每个国家/地区。我还添加<i></i>了第一个国家，看看它是否至少会放西班牙国旗，但什么也没有。

！我知道有一个类似的问题，但它使用手动 css 坐标，我希望它与这个 JavaScript 中的方法一起工作：

(function($) {
// size = flag size + spacing
var default_size = {
    w: 20,
    h: 15
};

function calcPos(letter, size) {
    return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}

$.fn.setFlagPosition = function(iso, size) {
    size || (size = default_size);

    return $(this).css('background-position',
        [calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
})(jQuery);

// USAGE:

(function($) {

$(function() {
    // on load:
    $('.country i').setFlagPosition('es');

});

})(jQuery);​

http://jsfiddle.net/3TvWs/是我现在所在的位置。

任何人都可以提供帮助，甚至只是一个提示吗？

编辑：对不起，我意识到我解释得很糟糕。（标志）西班牙只是精确定位如何工作的一个例子。我实际上的意思是旗帜在下拉列表中，根本没有那个西班牙气泡。很抱歉对于这个误会。

4

1 回答 1

0

设置事件处理程序以侦听下拉菜单事件上的更改事件并调用setFlagPosition它。

$('select[name="country"]').on('change', function(){
    $('.country i').setFlagPosition($(this).val())[0].nextSibling.nodeValue = $(':selected', this).text();
});

http://jsfiddle.net/mowglisanu/3TvWs/1/

于 2012-12-02T02:23:33.730 回答