javascript - 如何使用 javascript 作为事件文本显示 <img> 标签

Question

我想显示 <li> 的图标选择时标记而不是文本。请看:http://jsfiddle.net/Zenko/PUAY7/4/

更新:解决方案修复:http://jsfiddle.net/Zenko/PUAY7/12/

HTML

<section class="main">
<div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-3" tabindex="1">
        <span>Transport</span>
        <ul class="dropdown">
            <li><a href="#"><img src="https://cdn1.iconfinder.com/data/icons/finalflags/16/United-States-Flag.png" />classic mail</a></li>
            <li><a href="#">UPS Delivery</a></li>
            <li><a href="#">Private jet</a></li>
        </ul>
    </div>
</div>

JS

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li > a');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

    var dd = new DropDown( $('#dd') );

    $(document).click(function() {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});

如果您查看我的 jsfiddle，您会发现选择元素时未显示标志图标。非常感谢任何帮助。

Answer 1

像这样更改此js代码。

obj.opts.on('click',function(){
     var opt = $(this);
     obj.val = opt.html();
     obj.index = opt.index();
     obj.placeholder.html(obj.val);
});