zoukankan      html  css  js  c++  java
  • 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("三");
    		}
    	})
    }
    
  • 相关阅读:
    JVM虚拟机
    antd Table排序问题
    关于element-ui中el-container布满全局的问题!
    vue 安装css预处理器LESS
    mybatis官网
    Lombok安装及使用介绍
    thymeleaf中th:each的使用,遍历数组
    thymeleaf中th:text和th:utext的使用与区别
    SprongBoot项目的打包与启动
    SpringBoot简单学习
  • 原文地址:https://www.cnblogs.com/qlqwjy/p/7778097.html
Copyright © 2011-2022 走看看