Question

我正在开展一个大学项目，这个项目基本上是一个精心设计的新闻摘要。我需要在单击主题时动态生成文章标题列表。我已经能够这样做，并使用for循环动态分配列表ID和值。每个列表都是可单击的，并调用参数化函数，参数列为值。我不确定如何定义函数和语法以使其成为可能。

我需要这样做，以便点击时每个标题可以使用AJAX与servlet交互，并根据其值生成与标题对应的文章。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>


<script type="text/javascript">
    function change() {
        var i = 0;
        var set;
        document.getElementById('content').innerHTML = '';
        for (i = 1; i < 6; i++) {
            var div = document.getElementById('content');
            div.innerHTML = div.innerHTML + '<a href="#" onClick="rem()">'
                    + '<h2 id="theading'+i+'" value="'+i+'">HEADING ' + i
                    + ' WILL GO HERE</h2></a><br>';
        }
    }

    function rem(value) {
        document.getElementById('content').innerHTML = value
                + '<h1>THE NEWS WILL GO HERE</h1>';
    }
</script>
</head>

<style type="text/css">
* {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: orange;
}
</style>

<body>
    <a href="#" onClick="change()"><h3>TOPIC</h3></a>
    <div id="content"></div>
</body>
</html>

如何编写代码，以便可以调用rem（）函数，并将其参数作为相应列表的值。

Answer 1

我会完全重写你的第一个功能：

function change() {
    var i = 0;
    var set;
    var div = document.getElementById('content');
    div.innerHTML = '';
    for (i = 1; i < 6; i++) {
        var a = document.createElement('a');
        a.href = "#";
        a.onclick = rem.bind(null, i); // Here is the magical part
        a.innerHTML = '<h2 id="theading'+i+'">HEADING ' + i
                + ' WILL GO HERE</h2>';

        div.appendChild(a);
        div.appendChild(document.createElement('br'));
    }
}

Answer 2

您需要将该值传递给方法rem()。

我并不绝对确定你不想传递哪个值，而是改变：

onclick="rem()"

为：

onclick="rem(' + i + ')"

单击链接时，

将调用方法rem，其值为i。

之后，您可以而且应该从value="'+i+'标记中删除h2。它不是有效的HTML。

干杯。

Answer 3

拥抱this的力量。

onClick="rem(this)"

此将传递对被点击元素的引用。然后，您可以使用父母和子女遍历DOM，以查找其他元素，而无需处理凌乱的ID。

需要帮助在JavaScript中调用带参数的函数

3 个答案: