Question

我有input，当我打字时，请说： a ，我希望结果为<li class="a"><img src="a.png" />如果< strong>空间 =＆gt; <li class="space"></li>。此列表附加到ul.text。

当我按退格时，我需要删除最后一项。

我现在已经这样了，但是我无法让它发挥作用：

$('input').live('keyup', function(e){
    this.value = this.value.toUpperCase();
    var pressedLetter = $(this).val().toLowerCase();
    $('ul.text').append('<li><img src="letters/'+pressedLetter+'.png" alt="" /></li>');
});

请帮忙吗？感谢。

Answer 1

您需要在每个keyup上为您的ul元素添加新元素。您必须更改li和img元素的属性。

$('input').live('keyup', function (e) {
    this.value = this.value.toUpperCase();
    var pressedLetter = $(this).val().toLowerCase();

    if( $('ul.text').find('li').length < 1 && this.value.length > 0 ) {
        $('ul.text').append('<li><img/></li>'); //Append new elements (li,img) if they doesn't exist
    }else{    
        if (this.value.length < 1)  $('ul.text').find('li').remove(); //Remove element if value.length < 1
    }

    $('ul.text').find('li').attr('class', this.value);
    $('ul.text').find('img').attr('src', 'letters/' + pressedLetter + '.png');
});

JSfiddle

jQuery在键入时添加带有图像而不是文本字符的列表

1 个答案: