Javascript 在插入到div时应用样式

我正在构建一个“按标签搜索”输入框，如下所示：

请原谅这种糟糕的样式，因为这只是大型应用程序的一个小组件，我刚刚添加了显示问题所需的样式

我的搜索框是一个

div

，它使用Jquery插入文本，如下所示：

$(document).ready(function () {
 $('.search-box').click(function () {
     $('.search-options').toggle();

 });

 $('.options').click(function () {

     var d = $('.search-box').html();
     console.log(d);
     var c = $(this).html();
     console.log(c);
     if (d != '') {
         $('.search-box').html(d + ', ' + c);
     } else {
         $('.search-box').html(c);
     }
     $('.search-options').hide();
 });
 $('#reset').click(function () {
     $('.search-box').html('');
 });
 });

其中

.search box

是输入div，

.options

是下拉框

search options

中的可单击选项

目前，每个选项的文本都被插入到搜索框div中。我需要在它进入搜索框时动态设置样式

我尝试了以下几行：

  $('<span>').addClass('tag').append(
                    $('<span>').text(value).append('&nbsp;&nbsp;'),
                    $('<a>', {
                        href  : '#',
                        title : 'Removing tag',
                        text  : 'x'
                    });

$（“”）.addClass（'tag'）.append(
$（“”）.text（value）.append（“”），
$('', {
href:“#”，
标题：“删除标签”，
文本：“x”
});

其中，

标记

类在样式表中定义，以将元素样式设置为标记， 但这根本不起作用。有人能帮我把输入文本的样式设计成Evernote笔记本上的标签吗

---

谢谢！

对于你要做的事情，有很多优秀的插件已经提供了很多“更漂亮”的功能，而且你的工作也少了很多。在评论中已经提出了一些建议。我可以建议考虑使用。语法非常简单。只需创建一个选择框如下：

<select id="test" multiple>
  <option>pdf</option>
  <option>document</option>
</select>

我在这里放了一个在JSFIDLE上实现这一点的示例：。一旦达到了可以使用的程度，您可以通过检查所选元素正在创建的内容来轻松设置元素的样式。例如，“li.search choice”选择器将允许您设置所选项目的样式

一般来说，即使你不喜欢这个特殊的插件，也要考虑对现有的项目进行搜索，这样你就可以找到你想要的东西。如果这些都不是完美的，那么你就可以不断改进它们，并向整个社区提供这样的洞察力。这样，每个人都可以一起学习。

---

祝你好运！

我调整了你的小提琴。只需在一个类中包装

c

（就像你在文章的第二部分中尝试做的那样），并在css中应用样式。我刚刚将背景设置为红色，但应该很容易使它看起来像下拉菜单中的标签

JS:

---

为什么要重新发明轮子？@BenM welp，我确实试过了。但是这个应用程序已经构建好了，每当我尝试引入新的库时，它都会崩溃。我已经尝试过Xoxco的标记输入，但它破坏了整个应用程序。@Newtt“break”意思是它破坏了样式/布局还是完全破坏了应用程序？如果前者你可能有重叠的css类。只是想一想！@drew\w破坏了整个应用程序哈哈。如果它只是css，那么我已经修复了it@Newtt这真的很糟糕。这可能表明应用程序构造得不好。

$(document).ready(function () {
    $('#test').chosen({width: "80%"});
});

 $('.options').click(function () {
     var d = $('.search-box').html();
     var c = $(this).html();
     $('.search-box').append('<span class="tag">'+c +'</span>');
     $('.search-options').hide();
 });

.tag {
    background: red;
}