Question

我想知道如何在方法中调用带参数的函数。我有2个函数，我想在单击由addCode（）函数创建的list元素时调用函数deleteCode（）。我确信解决方案非常简单，但我现在看不到它。非常感谢！

function addCode(code) {
    $('#codeList').append('<li class="codeList" onClick="deleteCode(code);">' + code + '</li>');
}

function deleteCode(code) {
    $('#'+code).remove();
}

Answer 1

不引人注意，你很好。

function addCode(code) { 
    $('#codeList').append($('<li>', {
        'class':    'codeList',
        'text':     code,
        'click':    function(e) {
             deleteCode(code);
        }
    }));
}

参考：$()

Answer 2

你可以这样做：

function addCode(code) {
    $('<li class="codeList">' + code + '</li>').click(function() {
        deleteCode(code);
    }).appendTo('#codeList');
}

function deleteCode(code) {
    $('#'+code).remove();
}

......或者更简单：

function addCode(code) {
    $('<li class="codeList">' + code + '</li>').click(function() {
        $('#'+code).remove();
    }).appendTo('#codeList');
}

当使用像jQuery这样的库时（或者即使不是，坦率地说），几乎没有任何理由使用旧式onclick属性来设置处理程序。在上面，我用click函数替换了它，它在用户单击元素时设置了一个处理程序。

注意：Lazarus指出您的代码正在使用id值code删除元素：

$('#' + code).remove();

...但是代码不会生成具有该ID的元素。我假设您已将其他代码添加到其他位置，并且目标不是删除您使用此代码添加的li。

如果希望在点击时删除相同的li，则根本不需要ID：

function addCode(code) {
    $('<li class="codeList">' + code + '</li>').click(function() {
        $(this).remove(); // <== Changed here
    }).appendTo('#codeList');
}

Answer 3

通过代码创建<li>元素，而不是附加原始HTML。

function addCode(code) {
    // Create the <li>
    var newEl = document.createElement("li");
    newEl.className = "codeList";

    // Assign the click function via jquery's event helper.
    $(newEl).click(function(code) {
        // Call your deleteCode function and pass in the given parameter.
        deleteCode(code);
    });

    // Append the new element to the codeList node.
    $(#codeList).append(newEl);
}

Answer 4

您可以尝试：

function addCode(code) {
$('#codeList').append('<li class="codeList" onClick="deleteCode(' + code + ');">'+code+'</li>'); 
}

jQuery - 使用方法内部的参数调用函数

4 个答案: