带有 ui.item.value 的淡入淡出 appendTo [英] fadeIn appendTo with ui.item.value

问题描述

我正在使用 jQueryUI 的自动完成小部件从 MySQL 数据库中检索主题名称.当用户从自动完成列表中选择一个主题时，我想将该主题附加到 #subjects_container，并用淡入淡出显示它.我的问题似乎出在语法上，尽管我没能看到我的错误.

I'm using jQueryUI's autocomplete widget to retrieve subject names from a MySQL database. When the user selects a subject from the autocomplete list, I want to append that subject to #subjects_container, displaying it with fadeIn. My problem seems to be with syntax, although I haven't been able to see my error.

ui.item.value 确实包含我想要追加的内容

ui.item.value indeed contains what I want to append

检索值的函数:

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" />" + ui.item.value + "").appendTo( "#subjects_container" );
    }
});

}

令我沮丧的是，只附加了复选框！也许我的串联是错误的.

To my dismay, only the checkbox is appended! Perhaps my concatenation is wrong.

注意:hide() 和fadeIn() 未在此处显示.

Note: hide() and fadeIn() aren't shown here.

最终解决方案

用html标签包裹ui.item.value，这里标签:

Wrap ui.item.value in html tags, here <span> tags:

function autocompletejq() {
$( "#autocomplete" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    delay: 0, 
    select: function(event, ui) {
        alert(ui.item.value);
        $( "<input class=\"added_chkboxes\" type=\"checkbox\" checked=\"checked\" /><span>" + ui.item.value + "</span>" ).appendTo( "#subjects_container" ).hide().fadeIn();
    }
});

}

推荐答案

关于效果部分:

$("<p>My new Content</p>").appendTo("#myWrapper").hide().fadeIn();

关于对象创建:我认为您需要将ui.item.value"包装在 html 标签中，例如一个跨度.

Regarding object creation: I think you need to wrap your "ui.item.value" inside an html tag, e.g. a span.

总而言之，我会尝试……像这样:

All in all I would try sth. like this:

var newHTML = '<input class="added_chkboxes" type="checkbox" checked="checked" />' +      
    '<span>ui.item.value</span>';
$(newHTML).appendTo("#subjects_containe").hide().fadeIn();

这是一个虚拟示例:http://jsfiddle.net/SunnyRed/dB2uT/

希望这会有所帮助.

这篇关于带有 ui.item.value 的淡入淡出 appendTo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！