javascript - 动态填充列表

Question

使用 http://jquerywidgets.com/widgets/fancy-list/ 中的 jQuery FancyList

我正在尝试插入 <li>通过代码，而不是通过用户点击操作。

我的问题在于this关键字，具体如下几行:

    $(".fancy-list-footer .add").click( function() {
        $('.tab-container .user-information .first-name:last').val('').removeClass('placeholder');
        $('.tab-container .user-information .last-name:last').val('').removeClass('placeholder');
        fancyList($(this));
    });

我希望能够传递名字和姓氏，而不必填充文本框 - for 循环可以做到这一点。

我尝试更改 fancyList(elem)函数为 fancyList(elem, firstName, lastName)但我似乎无法获得 elem 的正确值 - 我尝试过 var elem = document.getElementByClassName('fancy-list-footer')因为我认为这就是$(this)在按钮单击中引用，但这也不起作用。

代码笔:http://codepen.io/anon/pen/vEYaqa?editors=101

感谢任何帮助!

Answer 1

您可以创建一个类似的函数来添加名称:

function addToFancyList(first_name, last_name) {
    $('.fancy-list').find(".fancy-list-content-list:last").append("<li><div class='person'><span class = 'first'>" + first_name + "</span><span class = 'last'>" + last_name + "</span></div><div class='clear'></div></li>");
}

简单地这样调用它:

$(function () {
    addToFancyList('Tom', 'Someone');
});