javascript - 添加/删除单击按钮时要列出的项目 - Twitter Bootstrap

Question

我目前正在尝试在我的项目中为条件规则创建选项。我正在尝试设置一个智能过滤系统（类似于电子邮件），用户可以在下拉列表中选择不同的选项，并确定如何动态填充文件夹。

我见过许多具有这种条件功能的程序，我想在我的 Twitter Bootstrap 项目中重新创建它，但我无法弄清楚如何让 Add(+) 和 Minus (-) 功能在前端工作。

1. 我想知道是否已经存在具有此类功能的插件？

2. 如果不是，我希望通过 JavaScript / jQuery 实现获得一些帮助。

我已经把基本的 HTML 和 CSS 放在这里，所以你可以看到我想要做什么

演示：http: //jsfiddle.net/y7CwE/1/

注意：默认情况下总是有 1 行（并且第一行没有减号来删除它，只有后续行具有菜单功能）

<p>Please Create the following rules for your group</p>
<ul id="conditionRow-1">
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</ul>

<ul id="conditionRow-2">
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
<a href="#" data-toggle="tooltip" title="Remove Rule"><i class="icon-minus"></i></a>
</ul>

Answer 1

我建议使用jQuery 的 load方法来加载动态内容，而不是将其全部放在字符串声明中（这是更新的噩梦）：

$('.add').on('click', function() {
   var new_id = parseInt($('ul[id*=conditionRow').length) + 1;
   var selector = 'conditionRow-' + new_id;
   $(this).before('<ul id="' + selector + '"></ul>');
   $(selector).load('/path/to/load/script');
});

$('.remove').on('click', function() {
   if (confirm("Are you sure?")) {
      $(this).parents('ul').remove();
   }
});

在您的加载脚本中，您只需输出一个 HTML 文件：

<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<li>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</li>
<a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
<a href="#" data-toggle="tooltip" title="Remove Rule"><i class="icon-minus"></i></a>

您还可以在加载调用中传递参数，以使您的 HTML 更具动态性。

Answer 2

Little amends链接不应放置在li：

<p>Please Create the following rules for your group</p>
<ul>
<li>
    <select>
        <option>Client</option>
        <option>Resource</option>
        <option>Site</option>
        <option>Options</option>
        <option>Meals</option>
    </select>
</li>
<li>
    <select>
        <option>is</option>
        <option>is not</option>
    </select>
</li>
<li>
    <select>
        <option>X</option>
        <option>y</option>
        <option>Z</option>
        <option>A</option>
        <option>B</option>
    </select>
</li>
<li> 
    <a href="#" data-toggle="tooltip" title="Add Another Rule"><i class="icon-plus"></i></a>
</li>
</ul> 

jQuery：

$(document).ready(function () {
    $("a").tooltip();
    var add = true;
    $(document).on('click', '.icon-plus', function () {
        var $clone = $(this).closest('ul').clone();
        $clone.insertAfter($(this).closest('ul'));
        if(add==true){
            $clone.last('li').append('<a href="#" data-toggle="tooltip" title="remove this"><i class="icon-minus"></i></a>');
            add=false;
        }
    });
    $(document).on('click', '.icon-minus', function () {
       $(this).closest('ul').remove();
    });
});

在这里查看更新的第四小提琴