Question

情况：

目前我有一个搜索框，利用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 ==“Boston Red Sox”）{ 然后将具有特定格式的“Boston Red Sox”附加为列表项目和下面的相应徽标。 } else { 什么都不做 }

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

Answer 1

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);
        }
    );

Answer 2

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;}
....

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

JavaScript变量和用户输入

2 个答案: