Question

在打开jquery模式时，我想调用一个事件处理程序来计算textarea字段中的行数，例如：

$(".modal").on("focus", function() {
    var textarea = $(this)[0],
        lines = t.value.split("\n").lenth;
});

这样可行，但我还想在编辑textarea时实时计算行数。

$(".textarea").on("onkeydown onkeyup", function() {
    var textarea = $(this)[0],
        lines = t.value.split("\n").lenth;
});

我必须输入相同的行两次甚至更多。有没有捷径？

Answer 1

您可以将逻辑提取到一个函数中，然后可以根据需要将其附加到任意数量的事件处理程序。试试这个：

function getLines() {
    var textarea = $(this)[0],
    lines = t.value.split("\n").length; //Note: fixed typo
}

$(".modal").on("focus", getLines);
$(".textarea").on("onkeydown onkeyup", getLines);

这假定.modal和.textarea是相同的元素，因此函数中的this始终引用相同的元素。

如果它们没有引用相同的元素，您可以使用$.proxy()来更改函数的范围：

$(".modal").on("focus", function() {
    $.proxy(getLines, $(this).find('.textarea'))();
});
$(".textarea").on("onkeydown onkeyup", getLines);

Answer 2

感谢Rory，我设法找到了解决方案

function get_code_lines(element) {
    var content = $(element).find("textarea.codeview").val(),
        lines = content.split("\n").length,
        html = '';
    for(i = 0; i < lines; i++) {
        html += '<div><span>' + (i+1) + '.</span></div>';
    }
    $(element).find("div.line-nums").html(html);
    $(element).find("textarea.codeview").height((18*lines));
}    

$(".modal").on("focus", function() {
    get_code_lines($(this));
});

$(".codeview").on("keydown keyup", function() {
    var parent = $(this).closest(".modal");
    get_code_lines(parent);
});

为多个事件调用相同的事件处理程序

2 个答案: