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')，因为我认为这是'{1}}按钮点击中引用的$(this)是什么，但这也没有效果。

Codepen：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');
});

Answer 2

答案依赖于函数本身。这里是您发送的链接中fancyList的实现：

        function fancyList(elem) {

        var this_parent = elem.parents(".fancy-list");

        rel = this_parent.attr("rel");
                var regex = /(<([^>]+)>)/ig;

        first_name = this_parent.find(".fancy-list-footer input#fancy-list-first-name").val().replace(/[<\s]/g, "").replace(/[>\s]/g, "");
        last_name = this_parent.find(".fancy-list-footer input#fancy-list-last-name").val().replace(/[<\s]/g, "").replace(/[>\s]/g, "");

        // more lines of code...

但它很容易改变：

        function fancyList(elem, first_name, last_name ) {

        var this_parent = elem.parents(".fancy-list");

        rel = this_parent.attr("rel");
        var regex = /(<([^>]+)>)/ig;

        first_name = first_name .replace(/[<\s]/g, "").replace(/[>\s]/g, "");
        last_name = last_name.replace(/[<\s]/g, "").replace(/[>\s]/g, "");

        // more lines of code...

这样，该功能将更好地满足您的需求，并且不会强迫您生成元素以获取其文本值

动态填充列表

2 个答案: