javascript - 使用函数创建变量

Question

我正在寻找一种使用函数创建变量的方法，因为我定义了用于在函数内部独立创建变量的变量，具体取决于用户的操作。

这是我拥有的，但它不起作用:

var popupContent = ''
var message = ''
var postLink = ''
function createMessage() {
    popupContent = [
        "<p>" + message + "</p>",
        "<form action='" + postLink + "' method='post' accept-charset='utf-8'>",
            "<ul class='cd-buttons no_margin'>",
                "<li><a class='submit'>Yes</a></li>",
                "<li><a class='popup-close'>No</a></li>",
            "</ul>",
        "</form>",
        "<a class='cd-popup-close popup-close img-replace'>Close</a>"
    ].join('');
}

//Accept Employement Request
$('.popup1').on('click', function() {
    employeeName = $(this).siblings('.js-employee-name').text();
    var message = "Are you sure you want to hire <b>" + employeeName + "</b>?"
    var postLink = "/hire-employee"

    createMessage();

    $(".cd-popup-container").append(popupContent);
});

JSFIDDLE

Answer 1

您可以按如下方式从函数返回内容，然后在 .append() 中调用该函数方法:

function createMessage(message, postLink) {
    return [
        "<p>" + message + "</p>",
        "<form action='" + postLink + "' method='post' accept-charset='utf-8'>",
            "<ul class='cd-buttons no_margin'>",
                "<li><a class='submit'>Yes</a></li>",
                "<li><a class='popup-close'>No</a></li>",
            "</ul>",
        "</form>",
        "<a class='cd-popup-close popup-close img-replace'>Close</a>"
    ].join('');
}

//Accept Employement Request
$('.popup1').on('click', function() {
    employeeName = $(this).siblings('.js-employee-name').text();
    var message = "Are you sure you want to hire <b>" + employeeName + "</b>?"
    var postLink = "/hire-employee"
    $(".cd-popup-container").append( createMessage(message, postLink) );
});

注意 您要传递所需的数据 message和 postLink作为函数的参数。 您不需要将这些变量声明或初始化为全局变量。您不想弄乱全局范围。它们是回调本地的，它们持有的数据将传递给 createMessage() .请注意变量 message和 postLink createMessage() 的参数是本地的 createMessage() .

DEMO

根据您的演示，我想知道使用 .html() 是否更合适？而不是 .append() !