Question

一个简短的javasctipt / jquery脚本，用于匹配/分配文本字符串值和html实体unicode值，例如。 '＆安培;＃58880'。

例如，从

获取其unicode开始的5个图标

（显示篮球的图标）
（显示网球的图标）
（显示板球的图标）
（显示排球的图标）
（显示基球的图标）

html会是这样的（注意：它们可以随时以任何顺序出现。）

<p><span data-icon="&#58883;"></span>Volleyball</p>
<p><span data-icon="&#58884;"></span>Baseball</p>
<p><span data-icon="&#58882;"></span>Cricket</p>
<p><span data-icon="&#58881;"></span>Tennis</p>
<p><span data-icon="&#58880;"></span>Basketball</p>

需要一种方法，以便每当文本字符串值出现时（例如篮球），它就知道动态插入'data-icon'并知道它的数据图标值是什么（例如'＆amp;＃58880'）等

Answer 1

你可以这样做。

这是一个小提琴供您参考： http://jsfiddle.net/47kj4zzu/1/

<强> HTML

 <div id="sports">
        <p>Volleyball</p>
        <p>Baseball</p>
        <p>Cricket</p>
        <p>Tennis</p>
        <p>Basketball</p>
    </div>

<强> JQuery的/使用Javascript

var icons = [
    {
        match: 'volleyball',
        unicode: '&#58883;'
    },
        {
        match: 'baseball',
        unicode: '&#58884;'
    },
    {
        match: 'cricket',
        unicode: '&#58882;'
    },
    {
        match: 'tennis',
        unicode: '&#58881;'
    },
    {
        match: 'basketball',
        unicode: '&#58880;'
    }  
];

var $sports = $('#sports').children('p');

$sports.each(function(){

    var $ele = $(this);    

    $.each(icons, function(){

        if($ele.text().toLowerCase().indexOf(this.match.toLowerCase()) >= 0)
        {
            $ele.prepend('<span data-icon="'+this.unicode+'"></span>');
            return false;
        }
    });

});

Answer 2

创建一个将游戏类型映射到html实体代码的对象。

为了演示的目的，我在示例中包含了一个select标签，允许您选择游戏类型并查看插入div的值。

var obj = {'volleyball':'&#58883;','baseball':'&#58883;','cricket':'&#58883;','tennis':'&#58883;','basketball':'&#58883;'};

$('#sel').change(function(){
    var tmp = $(this).val();
    var tmp2 = tmp.toLowerCase();

    $('#result').append('<p><span data-icon="'+obj[tmp2]+'"></span>' +tmp+ '</p>');
});

jsFiddle Demo

这是代码的核心：

var = '<p><span data-icon="'+obj[tmp2]+'"></span>' +tmp+ '</p>';

匹配/分配文本值到属性

2 个答案: