Question

我正在使用我在google上找到的预制列表构建国家/地区选择器，以及通过roberkules在http://overackflow.com/questions/5409780/上发布在stackoverflow上发布的png sprite上精确定位标记的智能方法HTML的国家列表与 - 标记）。

我是初学者，尽管我理解每个部分的工作原理，但我不明白如何“制作”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/我现在就在哪里。

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

编辑：对不起，我意识到我解释得很糟糕。（旗帜）西班牙只是精确定位的一个例子。我实际上意味着旗帜在下拉列表中，而根本没有西班牙泡沫。对不起有误。

Answer 1

设置一个事件处理程序，以便在下拉菜单事件中侦听更改事件，并在其中调用setFlagPosition。

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

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

向国家选择下拉列表添加标记

1 个答案: