Question

我是JQuery的新手，但我开始基本上是创建一个列表创建者。我有一个空列表和一个输入字段以及一个供用户添加元素到列表的链接。当我添加一些东西时，我希望它首先被隐藏，然后使用JQuery动态显示。目前，它会将其添加到列表中，但它会设置display: block而不是display:list-item或根本不设置任何内容。我做错了吗？

所以这里有一些代码

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});

这是一些HTML

<ol id="instructions"></ol>
<input type="text" id="step" size="60" />
<a href="#" id="addstep">Add</a>

Answer 1

我不确定为什么要添加额外的显示/隐藏调用。当您添加项目时，它将显示它。请进一步解释为什么需要进行显示/隐藏。

如果你绝对必须。

$('a#addstep').click(function() {    
    if ( $('#step').val().length > 0 ) {        
        $('<li />')            
        .text($('#step').val())            
        .hide()            
        .appendTo('ol#instructions')            
        .show('normal', function() {
            $(this).css('display', 'list-item')
        });    
    }
});

Answer 2

尝试使用

（“。theclass”）。css（“display”，“inline {或your desired value}”）;

而不是show（'normal'）

Answer 3

试试这个（未经测试）：

$('a#addstep').click(function() {
    if ( $('#step').val().length > 0 ) {
        $('<li />')
            .css('display', 'list-item')   // ADDED
            .text($('#step').val())
            .hide()
            .appendTo('ol#instructions')
            .show('normal');
    }
});

在list-item上调用show（）使它成为一个块元素并使子弹消失

3 个答案: