JavaScript变量和用户输入

情况：

目前，我有一个使用jQuery的自动完成插件的搜索框，允许用户搜索一项运动的团队，然后在提交按钮上选择，它会将团队附加为列表项（更可取的功能是当用户点击实际团队以添加项目时，但目前我不确定如何将点击功能应用于自动完成下拉菜单——欢迎建议）。

我正在寻找一种方法，将新添加的列表项与预定义的类或id相关联，以便在添加列表项后立即将某些格式和显示应用于该列表项。基本上，用户可以搜索NHL、NFL等中的任何球队，我需要根据他们选择的球队将文本颜色和徽标与它们配对，但徽标将单独显示在正文中，而不是列表中。

示例代码：

<!doctype html>
<html>
<head>
 <title>TEST</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
</head>
<body>
    <div class="ui-widget">
        <input id="tags" type="text" placeholder="Search Teams"/>
            <input id="submit" type="submit"/>
    </div>
        <ul class="target">
        </ul>
<script>
    $(function() {
            var availableTeams = [
                "Boston Red Sox",
                "New England Patriots",
                "Boston Celtics",
                "Boston Bruins",
                "New England Revolution"
            ];
    $( "#tags" ).autocomplete({
            source: availableTeams
        });
    });
    $('#submit').click(
        function() {
            var term = $('#tags').val();
                $('.target').append("<li>"+term+"</li>");
                }
            );
</script>       
</body>
</html>

我曾尝试使用if语句和document.getElementById的组合来尝试更改html内容，但我无法将我的想法拼凑在一起。

我的想法：

if（tags="波士顿红袜队"）{然后将"波士顿红袜队"以特定格式附加为列表项和相应的徽标。}其他{什么都不要做}

http://jsfiddle.net/kumcav30/（理想情况下，当附加时，它会像小提琴一样）。任何意见都将不胜感激。

jQuery将允许您在将元素添加到文档之前创建并更改它们。所以你可以做一些类似的事情：

$('#submit').click(
    function() {
        var term = $('#tags').val();
            var newelement = $("<li>"+term+"</li>");
            if (term == "Boston Red Sox") {
                newelement.addClass("your-class");
                //whatever else you need to do
            }
            $('.target').append(newelement);
        }
    );

for循环怎么样？

$(function(){    
var availableTeams = [
    "Boston Red Sox",
    "New England Patriots",
    "Boston Celtics",
    "Boston Bruins",
    "New England Revolution"
];
$( "#tags" ).autocomplete({
    source: availableTeams
});
var availableLogos = [
    "redSox",
    "patriots",
    "celtics",
    "bruins",
    "englandRevolution"
];
function teamstyle(term){
    var l = availableTeams.length;
    for (var i = 0; i < l; i++){
        if (term == availableTeams[i]){
            var newelement = "<li class="+ availableLogos[i] +">"+term+"</li>"
            $('.target').append(newelement);
        }
    }
}
$('#submit').click(function() {
    var term = $('#tags').val();
    teamstyle(term);
});
});

然后你可以使用css，比如：

.redSox {color: red; background: url('path/to/logo.png');}
.bruins {color: yellow;}
....

你的问题有点令人困惑。考虑将其缩小到您想要实现的目标（：

相关内容

最新更新

热门标签：