1

我写的jsp代码有点像这样：

<%
    out.println("<div id=\""+rs.getString(2)+"\" align=\"center\"  onclick=\"showDialog()\" style=\"float:left;background-color:#b4cde6; height: 150px; width: 200px;margin:20px \">");

            out.println("<p style=\"background-color:#ffffff;width:200px;\">NAME-"
                            + rs2.getString(2) + "</p>");

                    /* out.println("<input type=\"submit\" value=\""
                    + rs.getString(2) + "\" name=\"group\">");
                     */
                    out.println("<a  name=\"class_start\" value=\""
                            + rs.getString(1)
                            + "\"  style=\"background-color:#B4CDE6;width:200px;\" href=\"http://localhost:8080/ClassKarma_1/angular-gauge.jsp\">"+rs.getString(5)+"</a>");
        %>
    </div>

在这里，我正在为 < div> 动态添加 id，但是当我尝试在 javascript 中显示带有其 ID 的警报时，如下所示：

function showDialog() {
alert(this.id+" ID");
    };

它显示带有未定义 Id 的警报。我对此很陌生（我使用的技术可能完全错误）。请问有人可以帮我解决这个问题吗？

更新

生成的html是这样的。我认为它很完美。

          <div  style="background-color:#fffff;overflow:hidden; height:800px; width: 800px;">
        <div id="1" align="center"  onclick="showDialog()" style="float:left;background-color:#b4cde6; height: 150px; width: 200px;margin:20px "><p style="background-color:#ffffff;width:200px;">NAME-Saurabh</p><a  name="class_start" value="1"  style="background-color:#B4CDE6;width:200px;" href="http://localhost:8080/ClassKarma_1/angular-gauge.jsp">3</a></div>   <div id="2" align="center"  onclick="showDialog()" style="float:left;background-color:#b4cde6; height: 150px; width: 200px;margin:20px "><p style="background-color:#ffffff;width:200px;">NAME-Syed</p><a  name="class_start" value="1"  style="background-color:#B4CDE6;width:200px;" href="http://localhost:8080/ClassKarma_1/angular-gauge.jsp">1</a></div>
4

2 回答 2

1

解决方案：

<%
    out.println("<div id=\""+rs.getString(2)+"\" align=\"center\"  onclick=\"showDialog(" + rs.getString(2) + ")\" style=\"float:left;background-color:#b4cde6; height: 150px; width: 200px;margin:20px \">");

        out.println("<p style=\"background-color:#ffffff;width:200px;\">NAME-"
                        + rs2.getString(2) + "</p>");

                /* out.println("<input type=\"submit\" value=\""
                + rs.getString(2) + "\" name=\"group\">");
                 */
                out.println("<a  name=\"class_start\" value=\""
                        + rs.getString(1)
                        + "\"  style=\"background-color:#B4CDE6;width:200px;\" href=\"http://localhost:8080/ClassKarma_1/angular-gauge.jsp\">"+rs.getString(5)+"</a>");
    %>
</div>

JS

function showDialog(id) {
    alert(id + " ID");
};

解释：

为了显示在后端生成的 onclick 事件，进行了简单的更改：

原来的：

onclick=\"showDialog()\"

修改的：

onclick=\"showDialog(" + rs.getString(2) + ")

由于这种修改，javascript的函数也必须修改为接受参数......

这也可以通过将“this”传递给 onclick 函数并更改 javascript 函数以接受“this”作为参数来完成。这将解决问题，但它会传递单击的整个 div 项，而不仅仅是按您指定的方式单击的 div 的 ID。如果您需要更改单击的 div 的文本或执行任何与 DOM 相关的操作，如果您使用的是 jQuery，则应该传递“this”。

于 2013-06-04T07:27:36.423 回答
1

在showDialog函数内部，this指的是window，因为您是正常调用函数，例如showDialog(). 如果要this引用元素，则必须使用.call [MDN]：

onclick=\"showDialog.call(this, event)\"

了解更多this：

或者，您可以将元素作为参数传递给函数：

onclick=\"showDialog(this)\"

和

function showDialog(element) {
    alert(element.id);
}
于 2013-06-04T07:30:03.333 回答