前端学习制作中遇到的问题总结

最新推荐文章于 2024-10-30 14:59:26 发布

原创最新推荐文章于 2024-10-30 14:59:26 发布 · 350 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种实用的编程技巧：一是如何将JSP中获取的数据库数组传递给JavaScript进行处理；二是解决JavaScript中为多个元素绑定点击事件时变量作用域问题的方法。通过示例代码展示了具体的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，JSP中获取的数据库数组如何传给javascript，下面给出解决问题的代码（中间部份为传递代码）：

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="test.css"/>
<style>
.top{
position:relative;
width:100%;
height:50px;
top:0px;
}

.top p{
position:absolute;
top:15px;
left:50px;
}
</style>
<title>myFirstWebDemo</title>
</head>
<body>
<div class="center">
    <div class="top">
    <p>test image</p>
    </div>
    <div class="top">
    <p>test image</p>
	</div>
</div>
<%String []s = new String[3];
s[0] = "test1";
s[1] = "test2";
s[2] = "test3";
int i = 0;
%>
<script>
s = [];
var i = 0;

<%for(i = 0;i < 3; i++){%>
	s[i] = "<%=s[i]%>";
	i = i+1;
	<%}%>

var elem = document.getElementsByClassName("center");

for(var i = 0; i < 3; i++){
	var elem0 = document.createElement("div");
	elem0.className="top";
	var elem2 = document.createElement("p");
	elem2.innerHTML=s[i];
	elem0.appendChild(elem2);
	elem[0].appendChild(elem0);
}
</script>
</body>
</html>

2，为li标签添加点击事件alert对应id号时，若直接用纯JS写时，会出现抛出信息相同，应该可能大概或许是函数中对外部变量引用采用最后的结果吧。如下代码示例表示js的问题

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<li class="li">0</li>
<li class="li">1</li>
<li class="li">2</li>
<script>
var li = document.getElementsByClassName("li");
for(var i = 0; i < 3; i++){
     li[i].onclick=function(){alert(i);}
}
</script>
</body>
</html>

若嵌入jsp代码就可以完美解决这个问题，以下是输出正确信息的代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
</head>
<body>
<li class="li">0</li>
<li class="li">1</li>
<li class="li">2</li>
<script>
var li = document.getElementsByClassName("li");
var i = 0;
<%for(int i = 0; i < 3; i++){%>
     li[i++].onclick=function(){alert(<%=i%>);}
<%}%>
</script>
</body>
</html>