精华内容
下载资源
问答
  • 问题描述 如下图一所示循环了三个div,且每个div中又分辨循环多个span,给span绑定了点击事件,当点击时其他div里面的class.on也会跟着点击的那个移动,如图二所示。 ...

    问题描述 

    如下图一所示循环了三个div,且每个div中又分辨循环了多个span,给span绑定了点击事件,当点击时其他div里面的class.on也会跟着点击的那个移动,如图二所示。

                                   

                                                                                               图一

          

                                                                                                图二

    代码

           .little_box {
                overflow: hidden;
                display: flex;
                flex-direction: row;
            }
            .little_box span{
                padding:4px 10px;
                display: inline-block;
                text-align: center;
                border-radius: 6px;
                color: #333;
                cursor: pointer;
                margin-bottom: 10px;
                margin-right: 15px;
                background: #e5e5e5;
            }
            .little_box span.on{
                background: #6181ff;
                color: #ffffff;
            }
       <div style="width: 500px;" id="app" >
            <form id="form01">
                <div v-for="(value,i) in listData">
                    <p align="left" style="font-weight: bold">{{value.title}}<span>*</span></p>
                    <div class="form-select">
                        <div class="little_box" >
                            <span v-for="(subitem,j) in value.list"
                                  :class="{on:j===indexes}"
                                  @click="tap($event,i,j) ">{{subitem.subTitle}}</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    let listData = [
            {
                title:'学历',
                list:[
                    {subTitle:'全日制本科'},
                    {subTitle:'函授本科'},
                    {subTitle:'自考本科'},
                    {subTitle:'成教本科'},
                    {subTitle:'电大本科'},
                    {subTitle:'研究生及以上'}
                ]
            },
            {
                title:'所学专业',
                list:[
                    {subTitle:'计算机相关'},
                    {subTitle:'法学相关'},
                    {subTitle:'金融相关'}
                ]
            },
            {
                title:'目前从事工作',
                list:[
                    {subTitle:'公、检、法、律师'},
                    {subTitle:'其他'}
                ]
            },
        ]
    
        let vm = new Vue({
            el:'#app',
            data:{
                listData,
                indexes: 0,
            },
            methods:{
                tap(event,i,j){
                    this.indexes = j
                }
            }
        })

    解决方法

               <div v-for="(value,i) in listData">
                    <p align="left" style="font-weight: bold">{{value.title}}<span>*</span></p>
                    <div class="form-select">
                        <div class="little_box" >
                            <span v-for="(subitem,j) in value.list"
                                  :class="{on:indexes[i]===j}"
                                  @click="tap($event,i,j) ">{{subitem.subTitle}}</span>
                        </div>
                    </div>
                </div>   
    
           let vm = new Vue({
                el:'#app',
                data:{
                    listData,
                    indexes: new Array(listData.length).fill(0),
                    isSelect:false
                },
                methods:{
                    tap(event,i,j){
                        this.indexes[i]=j;
                        this.$forceUpdate()
                    }
                }
            })

     

    展开全文
  • //根据后台返回端口动态生成 for (let i = 0; i &lt; 8; i++) { var temp=` &lt;li&gt;&lt;p&gt;P`+i+`&lt;/p&gt;&lt;img id=`+`"$elementId$_p`+i+`Port"` + ` ...

    //根据后台返回端口个数动态生成

    for (let i = 0; i < 8; i++) {
    
    var temp=` <li><p>P`+i+`</p><img id=`+`"$elementId$_p`+i+`Port"`
    
    + ` data-id=`+`"$elementId$_p`+i+`Port"`+
    
    `src="/static/themes/skin/rsa-u1000/images/jackbox_no.png"
    
    /></li>`;
    
    $(jackbox).append(temp);
    
    }

     

    展开全文
  • vue 给循环生成的 li 动态绑定类 <li :class="{'类名':touch == i}" v-for="(item, i) in 数组名" :key="i" @click="a(item,i)"></li> 需要准备 1.一数组 2.一touch的值。 3.一点击事件 ...

    vue 给循环生成的 li 动态绑定类

    <li :class="{'类名':touch == i}" v-for="(item, i) in 数组名" :key="i" @click="a(item,i)"></li>

    需要准备

    1.一个数组

    2.一个touch的值。

    3.一个点击事件 用来传递当前的值

     

    data里面书写

    data:{
        touch:null,
        数组名: [a,b,c]
    }

    点击事件

    check(data, i) {
    	this.touch = i;
    },

     

    展开全文
  • 本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到,所以只好写了onclick方法点击实现...层级也没写太,不过方法是一样的,嵌套进去就行,举例子顺便记录一下,怕时间久远忘掉
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    		<link href="//cdn.bootcss.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    		<script>
    			$(function(){
    				$("#lhnum").change(function(){
    					var lhnum = $("#lhnum").val();
    					for(var i = 1;i<=lhnum;i++){
    						$("#lhul").append("<li id='lhli'>"+i+"号楼层数:<input class='am-input-field' type='text' id='"+i+"lcnum' /><button class='am-btn am-btn-success' id='"+i+"' οnclick='addHouselc(this.id)'>+</button><ul id='lcul"+i+"'></ul></li>");
    					}
    				});
    			});
    			function addHouselc(id){
    				var obj = id+"lcnum";
    				var num = $("#"+obj+"").val();
    				for(var j = 1;j<=num;j++){
    					$("#lcul"+id+"").append("<li>第"+j+"层户数:<input class='am-input-field' type='text' id='"+j+"zhnum' /></li>");
    				}
    			}
    		</script>
    		<style>
    			li{
    				list-style-type: none;
    			}
    		</style>
    	</head>
    	<body>
    		添加小区:<input type="text" name="" id="xq" value="" /><br />
    		添加楼号:<input type="number" name="" id="lhnum" value="" /><br />
    		<ul id="lhul" class="am-list am-list-static">
    			
    		</ul>
    	</body>
    </html>
    

    样式是随便用的amazeui的,没太细心调整,仅仅做个记录!


    楼号输入框元素用jquery的change方法当输入框失去焦点时自动生成各楼输入框


    本来生成层数也想用change方法但是发现动态生成的元素jquery不管哪种选择器都获取不到,所以只好写了onclick方法点击实现生成,如果哪位好汉有比较巧妙地方法评论介绍一下!


    层级也没写太多,不过方法是一样的,嵌套进去就行,举个例子顺便记录一下,怕时间久远忘掉

    展开全文
  •  由于是按值传递,参数i会传递给参数 num,这样的话,每执行一次for循环,就会给li [i]创建一个num副本,也就是在内存中开辟一个空间存入num的值,这样每个li都会有对应的num值。 var li_area = document....
  • JS循环创建复选框checkbox

    千次阅读 2017-08-04 22:03:30
    场景:在做一款手机app的gps数据采集后台项目时,需要在规定的时间频率...即在一个有效期期间可以包含多个采集时间段,这就需要创建多个复选框来实现相应的业务。 document.write(''); for(var i=0;i;i++){ document.
  • javascript 在ul中循环添加li标签

    千次阅读 2020-06-12 01:59:24
    循环变量Li标签,需要几个li循环几个 这里记得用+= 不然会覆盖a标签,否则只能输出最后一个a 最后页面输出时,因为我们只循环了li标签 所以在页面输出时 只需添加ul标签在把循环变量a放入ul标签即可! ...
  • JS动态添加li标签

    千次阅读 2020-05-29 16:51:46
    <div class="col-xs-12"> <ul id="tabName" class="nav nav-... //动态添加li标签 var ul = document.getElementById("tabName"); for (let i =0 ; i < str.length; i++){ var sname= str[i];
  • 在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定,循环对元素的事件进行赋值,在这过程中我们会遇到一问题,那就每元素事件运行的时候变量怎么都是相同的值。 这里涉及到变量的作用域的问题,可以用...
  • js通过for循环直接创建列表

    千次阅读 2020-07-08 15:02:24
    js通过for循环直接创建列表 不绑定事件直接创建一5列4行的列表 写了绑定的事件的动态创建...//循环创建ul,li for (var i = 0; i < 4; i++) { // var uls = document.createElement('ul'); //添加ul box.a
  • 最近在使用百度地图的时候遇到过一个问题,就是从数据库中进行加载数据,循环加载多个marker点,并且为每个marker点添加相对应的信息展示窗口,在实际执行的过程中,点击marker的时候显示的信息窗口总是显示的最后一...
  • ul建立1000个li

    千次阅读 2016-04-15 20:40:13
    最近看到的一个问题:如果让你在ul下建立1000个li,你会怎么做? 当时我只能想到的笨办法是遍历,但是现在想想,可以使用字符串 window.onload = function(){ var oUi = document.getElementsByTagName("ul");...
  • listButton = [[tk.Button for i in range(8)] for j in range(6)] def p86(): global listButton window86 = tk.Tk() window86.geometry("1536x864+0+0") li = tk.Label(window86, text='注视并点击按钮', bg='...
  • ul,li动态获取数据库数据并输出

    千次阅读 2016-02-03 20:42:50
    首先,前端设置一label标签,用于放置后台输出的ul,li列表 然后,后台使用StringBuilder类的方法,StringBuilder类在System.Text的命名空间下 using System.Text; 因为是项目,所以数据库的链接在web.config已...
  • 甚至更问题, A问题下可以动态增加文本框input,B问题下也可以动态增加input。现在遇到的bug是A问题增加input,B问题同时也增加input。同理B问题增加input时A问题也增加了。怎么区分开呢?删除也一样。 下面...
  • 动态创建DOM元素的三种方式

    千次阅读 2019-09-12 17:02:04
    动态创建DOM元素的三种方式 document.write(); 不常用,因为容易覆盖原来的页面。 innerHTML = (); 用的比较。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较,指定数量的...
  • JS中动态创建元素的三种方法

    千次阅读 2016-09-19 23:00:00
     例如向页面中输出一 li 标签 document.write("123"); body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容 2、动态创建元素二 innerHTML...
  • Java - 循环创建mapList

    千次阅读 2019-08-13 23:06:28
    package com.pans2.test... import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;...public class LoopMapTest { ... * 在 Loop 中创建Map数组 */ public static vo...
  • JavaScript动态创建DOM(七)

    千次阅读 2020-06-02 17:08:40
    动态创建DOM document.write只能在页面加载过程中才能动态创建。 可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//...
  • 多个点添加信息窗口"的基础上进行优化,优化部分: 1、CSS部分,主要是信息窗口的圆角和关闭按钮等格式处理,其实也可以自定义信息窗口(自己百度哈); 2、在多个点基础上增加标签,实现鼠标在marker上...
  • React for循环渲染组件

    千次阅读 2019-11-26 16:34:40
    或者循环遍历渲染相同的多个组件,下面看看怎么实现: 先来个有 If 判断的字组件循环渲染: render() { // 聊天列表组件 function MsgList(props){ const list = props.list; const listItems = list.map...
  • 本项目基于SSM框架,简单封装了Excel批量导入导出功能,不用建数据库表一键导入导出Excel,不过这样只适用于对导入的Excel表进行转换,通过模板导出Excel并且能实现导入多个sheet表。上一篇介绍了建表导入导出Excel...
  • 中里面嵌套了好空的&amp;lt;li&amp;gt;标签,点击&amp;lt;li&amp;gt;弹出它的序号(HTML不可以修改)。即点击第一&amp;lt;li&amp;gt;标签时弹出0,点击第二&amp;lt;li&amp;gt...
  • 先上出现的问题图(vue框架): ...li class='gray' v-for="(item,idx) in keywords_list" :id="item.kid"&gt; &lt;span&gt;{{idx + 1}}&lt;/span&gt; &lt;span&
  • 举例代码如下: var a=1;  for(var i=0;i;i++){  var input=document.createElement("input"); input.className="cd"; input.value="查看详情"; input.type="button";...这时想要为input标签添加一点击事件
  • 最近一直在研究正则表达式,原来接触过一段时间,但好久没有用了,基本都忘光了,然后上礼拜五,又开始学习正则表达式,周末在家做了采集电影院网站信息的一程序,疯狂的实验了把正则,发现了一些常用的匹配...
  • 点击li标签获取该标签的内容

    千次阅读 2017-02-21 17:17:42
    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了。 例如:点谁就显示谁的数值  1  2  3  4   错误:这种做法永远只能取到...
  • react 数据循环

    千次阅读 2019-05-20 21:46:24
    上图中的列表我是通过数组的map循环进行展示的(图片本身...循环过程每个li所设置的key值和数据库中的主键作用差不多,都是为了对数据进行唯一标识,一个key对应一个组件,当组件移动或者交换的时候,也就是数组动态...
  • 如何创建基本JQuery的插件

    万次阅读 2017-08-14 18:32:22
    如何创建基本的插件 有时您希望在整个代码中提供一些功能。例如,也许你想要一单一的方法,你可以调用一jQuery选择,对选择执行一系列的操作。在这种情况下,您可能需要编写一插件。 链接jQuery如何工作...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,517
精华内容 21,006
关键字:

动态循环创建多个li