Question

使用Javascript，我正在尝试运行一个循环来创建具有html属性的元素，单击这些属性时会触发另一个函数并将变量作为参数传递。

理想情况下，在这个例子中，点击一个字母时会调用Funky（）并记录下面的内容：c word_2不幸的是我得到Funky is not defined或c is not defined当我运行非常类似的东西时我得到[object HTMLInputElement][object HTMLSpanElement]你怎么做到这一点？

function Funky(letter, word) {console.log(letter + " " + word)} 

var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m']
var recollection = "";

for(x=0; x<arr.length; x++){
    recollection += '<p onclick="Funky('+arr[x]+', word_'+x+')">' +arr[x]+ '</p>';
    }

Answer 1

将其置于onload是一个问题。另外，您需要添加引号（转义）

    recollection += '<p onclick="Funky(\''+arr[x]+'\', \'word_'+x+'\')">' 
                    +arr[x]+ '</p>';

在你的小提琴中，改为“没有包裹身体”并再试一次。

Answer 2

你的小提琴只是因为建立了小提琴的方式而对该功能有参考问题。

如果您将Funky功能移动到HTML块内的脚本标记中，您将 fix that problem 。

然后你有内部问题。

function Funky(letter, word) {console.log(letter);} // skipping "word" for now


for(x=0; x<arr.length; x++){
    recollection += '<p onclick="Funky(\'' + arr[x] + '\');">' +arr[x]+ '</p>';
}

这将生成像

这样的块

<p onclick="Funky('a')">a</p>

您需要将参数放在引号内的函数中。我完全跳过word参数，我不明白。

但这感觉可能不是一般的最佳方式。

更新

这是另一种选择 - 我的头脑清洁 - 实现同样的事情的方式：

var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m'];

function Funky(idx) {
    console.log(arr[idx] + " " + 'word_' + idx);
} 

$('#list').html(arr.map(function(letter, idx) {
    return '<p data-idx="' + idx + '">' + letter + '</p>';
}).join("")).on('click', 'p', function() {
    Funky($(this).data('idx'));
});

Answer 3

你需要引用字符串。您还需要在document.ready处理程序中添加HTML。

function Funky(letter, word) {
    console.log(letter + " " + word)
}

var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm']
var recollection = "";

for (x = 0; x < arr.length; x++) {
    recollection += '<p onclick="Funky(\'' + arr[x] + '\', \'word_' + x + '\')">' + arr[x] + '</p>';
}

$(function () {
    $('#list').html(recollection);
    console.log(recollection);
});

但是既然您正在使用jQuery，为什么还需要使用这样的内联处理程序？给所有元素一个类，并将一个单击处理程序绑定到该类。

DEMO

如何在HTML属性中的函数调用中将变量作为参数传递？

3 个答案:

更新