JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)

有时候我们在前台需要对序号进行处理，我们需要将JS变量写到页面中进行显示。

　　第一种方式:后台处理

　　第二种方式:JS中定义全局变量，然后进行显示，可以书写一个JS函数对不同的需要进行不同的替换，也就可以根据不同的序号显示不同的内容。如果是ajax请求数据后拼接的页面可以直接调用函数返回值进行拼接(或者在循环中利用遍历的次数 i )。

思路:

　　定义一个JS全局变量，然后在JS中书写改变变量的方法，可以在每次调用函数的时候改变变量的值。可以结合 document.write();向HTML页面中书写变量

例如:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.js"></script>
    <script>
        var bigNum = 1;//全局变量
        //修改全局变量的值
        function replace(num) {
            if (num == 1) {
                return "一";
            }
            if (num == 2) {
                return "二";
            }
            if (num == 3) {
                return "三";
            }
        }

    </script>
</head>
<body>
//书写全局变量
<script>
    document.write(replace(bigNum++));
</script>
<br/>
<script>
    document.write(replace(bigNum++));
</script>
<br/>
<script>
    document.write(replace(bigNum++));
</script>
</body>
</html>

 

 

结果:

 

第三种:(重要)

用一个带指定class属性的span包住，根据span出现的顺序设置顺序。

<span class="bigNum"></span>

 JS方法:(i从0开始，代表遍历序号)

/**
 * 大题顺序
 */
function replaceBigNum(){
	$(".bigNum").each(function(i){
		if(i==0){
			$(this).text("一");
		}
		if(i==1){
			$(this).text("二");
		}
		if(i==3){
			$(this).text("三");
		}
	})
}

 

posted @ 2017-11-03 14:39  QiaoZhi  阅读(8540)  评论(0)  编辑  收藏  举报