如何用js点击相同类名的多个div,各个div之间的操作互不影响?

如何用js点击相同类名的多个div,比如制作一个相片展示,点击div之后显示我隐藏的div将页面覆盖,隐藏的div对其进行操作,关闭后,再点击其他div,之间的操作互不影响?

2个回答

类名相同可以取ID啊、document.getElementById("id值")

ainiburuqusi
ainiburuqusi 回复a_jin_aaaaa: 酱紫的话你可以用jquery的事件切换就行 ,给相同类名的所有div绑定事件切换就行,挺简单的。例如:https://blog.csdn.net/nitongxy/article/details/74906344
一年多之前 回复
weixin_42214154
Better丶G 面向对象,this不行么~~
一年多之前 回复
a_jin_aaaaa
阿瑾啊 js目前大概酱紫//查看图片 var bindPhotoDetailClick = function () { //弹出照片详情 $(".ph-detail-img").click(function () { $(".ori-photo").show(); }) ; //查看原图 $(".orignal-img").click(function () { $(".img-info").addClass("img-info2"); $(".orignal-img").hide(); }); // 关闭照片详情 $(".ori-photo").click(function (e) { var target = $(e.target); if(!target.is('.orignal-img') && !target.is('.img-info')){ if ( $(".ori-photo").is(':visible') ) { $(".ori-photo").hide(); } } }); };
一年多之前 回复
a_jin_aaaaa
阿瑾啊 <div class="ori-photo d-none"> <!-- <div class="exit">--> <!-- <img src="--><?php //echo Helper_Image::get_site_image_absolute_url('photo/exit.jpg'); ?><!--" alt="">--> <!----> <!-- </div>--> <div class="img-info no-exit"> </div> <div class="orignal-img no-exit"> 查看原图(1.5M) </div> </div>
一年多之前 回复
a_jin_aaaaa
阿瑾啊 emmmmm,我还是不懂呐, <div class="ph-list pb-35 clearfix"> <div class="ph-detail" href=""> <div class="ph-detail-img" > </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div><div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> <div class="ph-detail"> <div class="ph-detail-img"> </div> </div> </div>
一年多之前 回复

既然有多个相同类名的 div , 那就可以拿这个 div 的下标 index 做判断, 去区分是点击那个 div 了

$("类名").click(function(){
    let index = $(this).index();
})
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
具有相同类名的不同元素的相同jquery

<div class="post-text" itemprop="text"> <p>I have got this HTML that i get from PHP while loop</p> <pre><code>&lt;div class="WriteCom &lt;?php echo $Class?&gt;"&gt; &lt;form class="c_comment " method="post"&gt;&lt;input type="text" class="Comment_In" &gt;&lt;/form&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>And this Jquery</p> <pre><code>var commentcount=0; $(".WriteCom").children().submit(function() { var numItems = $(this).parent().siblings('.F_W_comments').children('.CommentsAw').length; var cc=$(this).children().val(); var i=$(this).parent().siblings(".c_jq").children().attr("data-i"); var com=$(this); commentcount++; $(this).children().val(''); $.ajax({ type: "GET", url: '../connect.php', data: "C=" + cc+"&amp;I="+i, success:function(data) { var json_x = $.parseJSON(data); com.parent().parent().siblings('.c_jq').children(".Comments").children(".L_CS").html(json_x[0]); if (numItems&gt;=4) { com.parent().siblings('.F_W_comments').children('.CommentsAw:first').remove(); } com.parent().siblings('.F_W_comments').append('&lt;div class="cn_'+commentcount+' CommentsAw Comment_HsJ"&gt;&lt;img src="../users/'+json_x[3]+'"&gt;&lt;span&gt;'+json_x[2]+'&lt;/span&gt;&lt;span class="s2"&gt;'+json_x[1]+'&lt;/span&gt;&lt;/div&gt;'); if (commentcount==1) { $(".Comment_Hs:first").css("marginTop","-75px"); $(".cn_1").css("marginBottom","15px"); }else if (commentcount==2) { $(".Comment_Hs:first").css("marginTop","-90px"); $(".cn_1").css("marginBottom","0px"); $(".cn_2").css("marginBottom","15px"); $(".cn_2").css("marginTop","-10px"); }else if (commentcount==3) { $(".Comment_Hs:first").css("marginTop","-105px"); $(".cn_3").css("marginTop","-10px"); $(".cn_3").css("marginBottom","15px"); $(".cn_2").css("marginBottom","0px"); }else if (commentcount==4) { $(".Comment_HsJ:first").css("marginTop","-105px"); $(".cn_4").css("marginTop","-10px"); $(".cn_4").css("marginBottom","15px"); $(".cn_3").css("marginBottom","0px"); }else{ $(".Comment_HsJ:first").css("marginTop","-105px"); $(".Comment_HsJ:eq(3)").css("marginTop","-10px"); $(".Comment_HsJ:eq(3)").css("marginBottom","15px"); $(".Comment_HsJ:eq(2)").css("marginBottom","0px"); } } }); return false; }); </code></pre> <p>So when i have several posts and i comment on first post <code>commentcount</code> becomes 1 and when i comment on second post <code>commentcount</code> becomes 2.But i want to have commentcount for each uploaded file individually. </p> </div>

jq,点击相同div,子节点添加或删除class

jq 几个相同class的div 对应点击div的子节点 添加class 其他的removeclass, 写了很多办法,就是不报错。点了也没有反应 ,一点反应都没有。 这是为什么??点击paylist-item,添加或删除item-selected div: ``` <aside data-v-522bb7c6="" class="paylist"> <header data-v-522bb7c6="" class="paylist-header">支付方式</header> <div data-v-522bb7c6="" class="paylist-item"> <span data-v-522bb7c6="">在线支付</span> <svg data-v-522bb7c6="" class="icon-select item-selected"> <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use> </svg> </div> <div data-v-522bb7c6="" class="paylist-item"> <span data-v-522bb7c6="">签约记账</span> <svg data-v-522bb7c6="" class="icon-select"> <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use> </svg> </div> <div data-v-522bb7c6="" class="paylist-item"> <span data-v-522bb7c6="">线下付款</span> <svg data-v-522bb7c6="" class="icon-select"> <use data-v-522bb7c6="" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use> </svg> </div> </aside> ``` javascript: ``` <script type="text/javascript"> $(".paylist-item").click(function(){ $(".paylist-item").siblings().children(".icon-select").removeClass("item-selected");//siblings是循环遍历 $(this).children(".icon-select").addClass("item-selected"); }) </script> ```

简单练习:CSS多个类名,样式为何不见了?

下面是http://www.fgm.cc/learn/lesson1/01.html这个练习的代码实现 html: ``` <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>控制div属性</title> <link rel="stylesheet" href="div.css"> </head> <body> <div id="btn"><input type="button" value="变宽"></input><input type="button" value="变高"></input><input type="button" value="变色"></input><input type="button" value="隐藏"></input><input type="button" value="重置"></input></div> <div id="change" class="change4 change3"></div> <script src="div.js"></script> </body> </html> ``` css: ``` #btn { width: 240px; margin: 0 auto; } .change0 { width: 200px; } .change1 { height: 200px; } .change2 { background-color: red; } .change3 { display: none; } .change4 { width: 100px; height: 100px; background-color: black; margin: 10px auto; display: block; } ``` javascript: ``` window.onload = function(){ var btn=document.getElementById("btn").childNodes; var change = document.getElementById("change"); for(var i=0;i<5;i++){ btn[i].onclick = (function (n){ return function(){ change.className = change.className + (" change"+n); } })(i); } } ``` 我想的思路很简单:就是点击按钮,添加类名,改变样式。在控制台可以看到类名是添加上了,但是样式没有改变。不知是何原因,还请各位朋友指点迷津!谢谢

jquery 获取同一class的div的所有ID值并取出最大值

``` <div id="SWFUpload_0_1" class="uploadify-queue-item"> <div id="SWFUpload_0_2" class="uploadify-queue-item"> <div id="SWFUpload_0_3" class="uploadify-queue-item"> <div id="SWFUpload_0_4" class="uploadify-queue-item"> ``` div如上,求取出上面所有div 并取做大的'SWFUpload_0_4'

遍历出来的class相同 所以我怎么才能每个button对应text框

``` @{ List<ExaminationHerp.BookTable> users = (List<ExaminationHerp.BookTable>)ViewBag.Users; foreach (ExaminationHerp.BookTable item in users) { <div class="rightmaintopleft"> <div class="rightmaintopcontent"> <a href="#"><img src="@item.Img" border="0" style="float:left";"width:41px;height:64px" /></a> <div style="float:left; width:154px"> <div class="wen1">@item.BookName <div> <div class="wen2">出版社:@item.Press</div> <div class="wen3">价格¥@item.Money(7.1折)</div> <div class="wen4"><img src="~/BooxCssJsImg/img/che1.png" border="0"/> <a href="#">购买</a> | <img src="~/BooxCssJsImg/img/da.png"/><a href="#">数量:</a> <input type="button" value="+" class="input2" style="width:20px"/ "> <input type="text" style="width:20px;margin-left:140px"; class="input1" value="0"/> <input class="input3" type="button" value="-" style="width:20px"/> </div> </div> </div> </div> </div> </div> ``` 遍历出来的 button 当点击+时 text的值+1 点击-时-1 遍历出来的class相同 所以我怎么才能每个button对应text框

通过querySelector获取并修改div中class的值

这个程序就是在页面中显示要播放的多媒体文件,同时显示多媒体文件的总时间,当单击播放按钮时,将显示当前播放了的时间。但是缺了一部分代码,有关通过querySelector获取并修改div中class的值的代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>媒体播放示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="布尔教育 http://www.itbool.com" /> <script> wrapper=document.querySelector('.videochrome'), buffer=document.querySelector('.videochrome.controls.buffer'), playhead=buffer.querySelector('.playhead'), play=wrapper.querySelector('.play'), duration=wrapper.querySelector('.duration'), currentTime=playhead.querySelector('span'); video.addEventListener('loadeddata',canplay,false);//使用事件监听准备播放 function canplay()//调用canplay函数初始化媒体 { initControls(); } function initControls() { duration.innerHTML=asTime(video.duration);//将播放时间以分秒的形式显示 play.onclick=function() { if(video.ended)//如果媒体播放结束,播放时间从0开始 { video.currentTime=0; } video[video.paused?'play':'pause']();//通过三元运算执行播放或暂停 }; } function asTime(t) { t=Math.round(t);//通过Math.round函数对获取到的时间取整 var s=t%60;//转化为分 var m=~(t/60); return m+':'+two(s);//以分:秒的形式输出时间 } function two(s) { s+=""; if (s.length<2)s="0"+s;//对秒数的位数进行判断,位数小于2时以0补位 return s; } video.addEventListener('play',playEvent,false);//使用事件播放 video.addEventListener('pause',pausedEvent,false);//播放暂停 video.addEventListener('ended',function()//播放结束后停止播放 { this.pause();//显示暂停播放 },false); function playEvent() { play.innerHTML='暂停'; } function pausedEvent() { play.innerHTML='播放'; } video.addEventListener('durationchange',updataSeekable,false);//播放的时长被改变 video.addEventListener('timeupdate',updatePlayhead,false);//使用事件监听方式捕捉事件 function updateSeekable() { duration.innerHTML=asTime(video.duration);//媒体文件的总播放时间 } function updatePlayhead() { currentTime.innerHTML=asTime(video.currentTime);//媒体的当前播放时间 } </script> </head> <body> <video src="../video/01.mp4"></video> <div class="videochrome paused"> <div class="controls"> <div class="scrub"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50" scope="row"> <button class="play" title="play">播放</button> </td> <td width="50" align="center"> <div class="duration">0:00</div> </td> <td width="50" align="center"> <div class="loaded"> <div class="buffer"> <div class="playhead"> <span>0:00</span> </div> </div> </div> </td> </tr> </table> </div> </div> </div> </body> </html>

jquery控制checkbox是否选中,第二次全选时没有作用。

``` $(function(){ var powerList = ${jsonStr}; var actions = '${actions}'; for(i=0;i<powerList.length;i++){ $("#"+powerList[i].pId).append("<input name='checkbox' type='checkbox' value='"+powerList[i].id+"' />"+powerList[i].name); if(actions.indexOf(powerList[i].id) != -1){ $("input[value='"+powerList[i].id+"']").attr('checked',true); } } }); function checkAll(name){ var check = $("input[name='"+name+"']").is(':checked'); var children = $("#"+name).find('input[type=checkbox]'); if(check){ children.attr("checked",true); }else{ children.attr("checked",false); } } ``` ``` <div class="div_main"> <div class="div_title">系统管理</div> <div style="padding:10px"> <table class="table_main"> <tr> <td class="td_title" >组织架构 <input name="organization_manage" type="checkbox" onchange="checkAll(name);" /> </td><td class="td_title"></td> </tr> <tr> <td id="organization_manage"></td> </tr> <tr> <td class="td_title">岗位授权</td><td class="td_title"></td> </tr> <tr></tr> </table> </div> </div> ``` ![界面](https://img-ask.csdn.net/upload/201507/28/1438052046_697407.gif) 当我打开界面第一次点中全选时可以实现,再次点击也可以取消全选;可是当第二次点击全选时下面的复选框就不再显示被选中了,但是单击选择了下面的复选框后再点击全选是可以把下面的取消的,这是为什么啊,求解。 第一张图中 $(function(......))方法就是向下面id为organization_manage的“《td》”标签中加入几个checkbox标签

js 点击给li标签添加class

怎么实现点击一次给li后面的一个li增加class ``` <ul id="jro_find_ul"> <li class="find_xuan"><label>1</label>填写账户名</li> <li><label>2</label>验证身份</li> <li><label>3</label>设置新密码</li> <li><label>4</label>完成</li> <div class="clearer"></div> </ul> <script> $(function(){ $("#my_button").click(function(){ var j=document.getElementById("jro_find_ul").getElementsByTagName("li").length; for(i=0;i<j;i++){ $(".find_title li").next().addClass("find_xuan"); } }) }) </script> ``` 这个点击后给所有的li都增加了

iscroll 怎么实现多区域滚动

移动端页面,采用zepto,iscroll怎么实现多区域滚动,四个div,类名相同,怎么让这四个区域都能横向滚动?

jquery如何实现互斥事件,点击一个按钮只有当前(this)类才有反应?

``` /*a的互斥事件*/ $(".RightContentImg").bind("click",function(){ $(".RightContentImgAdd").removeClass(".RightContentImgAdd"); $(this).addClass(".RightContentImgAdd"); }) ```

怎么用jquery给几个相同的标签动态添加不同的id?我的代码如下,求各位大神帮帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script> var title=$("p.title-season");//获取所有class为title-season的p元素 var season=$("div.season");//获取所有class为-season的div元素 for(i=0;i<season.length;i++){ if(i==title.length){ //$(season[i]).attr("id","cnContent"); season.length(i).setAttribute("id","cnContent");//为国配剧集添加id $("#cnContent").css("display","none"); } if(i<season.length&&i!=0){ //$(season[i]).attr("id","jpContent"); season.length(i).setAttribute("id","jpContent");//为日配剧集添加id $("#jpContent").css("display","none"); } } for(i=0;i<title.length;i++){ if(i==title.length){ //$(title[i]).attr("id","cn"); title.length(i).setAttribute("id","cn");//为国配标题添加id $("#cn").css("cursor","pointer"); $("#cn").live('click',function(){ $("#cnContent").toggle(); }); } if(i<title.length&&i!=0){ //$(title[i]).attr("id","jp"); title.length(i).setAttribute("id","jp");//为日配标题添加id $("#jp").css("cursor","pointer"); $("#jp").live('click',function(){ $("#jpContent").toggle(); }); } } </script> </head> <body> <p class="title-season">日配HD版</p> <div class="season"> <a class="btn btn-ep active primary" href="" data-aid="893545" data-vid="765811">01-02话</a> <a class="btn btn-ep" href="" data-aid="894374" data-vid="766560">03-04话</a> <a class="btn btn-ep" href="" data-aid="894374" data-vid="779541">05-06话</a> <a class="btn btn-ep" href="" data-aid="905694" data-vid="781164">07-08话</a> <span class="clearfix"></span> </div> <p class="title-season">日配TV版</p> <div class="season"> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771968">第1话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771969">第2话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771971">第3话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771972">第4话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771973">第5话</a> <span class="clearfix"></span> </div> <p class="title-season">国语配音版</p> <div class="season"> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771968">第1话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771969">第2话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771971">第3话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771972">第4话</a> <a class="btn btn-ep" href="" data-aid="294630" data-vid="771973">第5话</a> <span class="clearfix"></span> </div> </body> </html>

js正则匹配字符串中的完整Class类,大花括号内可能嵌套有花括号!

class类名是变量,所以要用new RegExp 这是我写的一部分,但匹配不全: ```//匹配的字符串 var str = 'asfsdf class Bop { public double breadth; public double height; static void get(){ var test = asas; var ssasd = function(){} } static void set(){} } class Boxtester { static void Main(string[] args) { Box Box1 = new Box(); Box Box2 = new Box(); double volume = 0.0; // Box1 详述 Box1.height = 5.0; Box1.length = 6.0; Box1.breadth = 7.0; } }'; //要匹配出来的字段是 //class Bop { public double breadth; public double height; static void get(){ var test = asas; var ssasd = function(){} } static void set(){} } var word = 'Bop'; var res = new RegExp("class\\s+"+word+"\\s*\\{(\\s+(.+?)\\s+)*\\}","g"); console.log(res.exec(str)) ``` 求教各位大神!

Jquery如何选择到父父元素下的某个子元素(越多种方法越好)

点击AddSection,给FormItemListEdit2下嵌套某个div,div已经用onclick动态生成 ``` <div class="FormItemListEdit"> <a href="javascript:void(0)"> <p class="EditContent"> <a href="javascript:void(0)" class="EditContentImg"></a>准备工作 </p></a> <a href="javascript:void(0)" class="RightContentImg"></a> <div class="RightContentImgAdd"> <div class="Entry"> <div class="EntryTrangle"></div> <a class="AddChapter"href="javascript:void(0)"><p>添加章</p></a> <a class="AddSection" href="javascript:void(0)"><p>添加节</p></a> <a class="DeleteColumn"href="javascript:void(0)"><p>删除</p></a> </div> </div> <a href="javascript:void(0)" class="RightContentNum">0字</a> <!-- 二级嵌套 --> <div class="FormItemListEdit2"> <p class="EditContent">安排行程规划</p> <a href="javascript:void(0)" class="RightContentImg"></a> <div class="RightContentImgAdd2"> <div class="Entry"> <div class="EntryTrangle"></div> <a class="AddSection2"href="javascript:void(0)"><p>添加节</p></a> <a class="DeleteColumn2" href="javascript:void(0)"><p>删除</p></a></div></div> <a href="javascript:void(0)" class="RightContentNum">0字</a></div> </div> ```

怎么用jquery给一个li标签添加和去掉class属性

用juqery 当点击一个菜单的时候给这个菜单的li标签添加一个class属性,当点击其他菜单的时候把这个class属性再给其他菜单,让前一个菜单的class属性消失,怎么写

求JQ或JS仿京东淘宝属性规格SKU样式

把这个修改成属性值可以在input-text区自定义,删除自定义的值后自动恢复初始属性值。如图所示功能:![图片说明](https://img-ask.csdn.net/upload/201608/13/1471094693_376707.png) ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生成表格</title> <link rel="stylesheet" type="text/css" href="css/table.css"> <style type="text/css"> .hide {display: none;} .mt10 {margin-top: 10px;} .control-group {overflow: hidden;} .control-group a {color: #666;text-decoration: none;} .control-group a:hover {text-decoration: underline;} .control-label {float: left;width: 100px;line-height: 24px;} .controls {overflow: hidden;} .controls input[type="text"] {border: 1px solid #ddd;height: 20px;width: 120px;} .controls input[type="button"] {margin-top: 10px;height: 32px;cursor: pointer;} .config_item {margin-top: 10px;border: 1px dashed #ddd;padding: 10px;} .config_item section {margin-top: 10px;} .config_item section span {margin-right: 16px;} .config_item input[type="text"] {width: 80px;text-align: center;} .choose_config .Father_Title {margin: 0;margin-bottom: 10px;padding: 0;font-size: 16px;font-weight: normal;display: inline-block;vertical-align: middle;} .choose_config .Father_Item {padding: 0;margin: 0;margin-bottom: 10px;list-style: none;display: inline-block;vertical-align: middle;} .choose_config .Father_Item li {display: inline-block;margin-right: 10px;} .columnList {border-collapse: collapse;} .columnList th {background-color: #eee;} .columnList th,.columnList td {padding: 5px 10px;border: 1px solid #ddd;line-height: 24px;text-align: center;} </style> </head> <body> <!-- 选择信息 --> <div class="control-group choose_config"> <div class="control-label">选择信息:</div> <div class="controls"> <h3 class="Father_Title">颜色:</h3> <ul class="Father_Item Father_Item0"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="红色">红色</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="白色">白色</label></li> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="土豪金">土豪金</label></li> </ul><br> <h3 class="Father_Title">内存:</h3> <ul class="Father_Item Father_Item1"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="32G">32G</label></li> <li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="16G">16G</label></li> </ul><br> <h3 class="Father_Title">尺寸:</h3> <ul class="Father_Item Father_Item2"> <li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="5.5">5.5</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="4.5">4.5</label></li> <li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="3.5">3.5</label></li> </ul><br> </div> </div> <!-- 生成表格 --> <div class="control-group mt10"> <div class="control-label">生成表格:</div> <div class="controls" id="createTable"> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> /** * Created by Administrator on 14-12-01. * 模拟淘宝SKU添加组合 * 页面注意事项: * 1、 .Father_Title 这个类作用是取到所有标题的值,赋给表格,如有改变JS也应相应改动 * 2、 .Father_Item 这个类作用是取类型组数,有多少类型就添加相应的类名:如: Father_Item1、Father_Item2、Father_Item3 ... */ $(function() { $(document).on('change', '.choose_config label', function() { var parent=$(this).parents('.Father_Item'); var _this=$('.checkbox',this); // 是否全选 $('.checkbox',parent).each(function() { var bCheck2=true; if (_this.hasClass('check_all')) { if (_this.get(0).checked) { bCheck2=true; $('.check_item',parent).prop('checked', bCheck2); }else{ bCheck2=false; $('.check_item',parent).prop('checked', bCheck2); } return false; } else { if ((!this.checked)&&(!$(this).hasClass('check_all'))) { bCheck2 = false; $('.check_all',parent).prop('checked', bCheck2); return false; } } $('.check_all',parent).prop('checked', bCheck2); }); step.Creat_Table(); }); var step = { // 信息组合 Creat_Table: function() { step.hebingFunction(); var SKUObj = $('.Father_Title'); var arrayTile = new Array(); // 表格标题数组 var arrayInfor = new Array(); // 盛放每组选中的CheckBox值的对象 var arrayColumn = new Array(); // 指定列,用来合并哪些列 var bCheck = true; // 是否全选,只有全选,表格才会生成 var columnIndex = 0; $.each(SKUObj, function(i, item) { arrayColumn.push(columnIndex++); arrayTile.push(SKUObj.eq(i).text().replace(':', '')); var itemName = '.Father_Item' + i; var bCheck2 = true; // 是否全选 // 获取选中的checkbox的值 var order = new Array(); $(itemName + ' .check_item:checked').each(function() { order.push($(this).val()); }); arrayInfor.push(order); if (order.join() == '') { bCheck = false; } }) // 开始生成表格 if (bCheck) { $('#createTable').html(''); var table = $('<table id="process" class="columnList"></table>'); table.appendTo($('#createTable')); var thead = $('<thead></thead>'); thead.appendTo(table); var trHead = $('<tr></tr>'); trHead.appendTo(thead); // 创建表头 var str = ''; $.each(arrayTile, function(index, item) { str += '<th width="100">' + item + '</th>'; }) str += '<th width="200">价格</th><th width="100">操作</th>'; trHead.append(str); var tbody = $('<tbody></tbody>'); tbody.appendTo(table); var zuheDate = step.doExchange(arrayInfor); if (zuheDate.length > 0) { //创建行 $.each(zuheDate, function(index, item) { var td_array = item.split(','); var tr = $('<tr></tr>'); tr.appendTo(tbody); var str = ''; $.each(td_array, function(i, values) { str += '<td>' + values + '</td>'; }); str += '<td ><input name="Txt_PriceSon" class="inpbox inpbox-mini" type="text"></td>'; str += '<td ><a href="#">删除</a></td>'; tr.append(str); }); } //结束创建Table表 arrayColumn.pop(); //删除数组中最后一项 //合并单元格 $(table).mergeCell({ // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 cols: arrayColumn }); } else { //未全选中,清除表格 document.getElementById('createTable').innerHTML = ""; } }, hebingFunction: function() { $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for (var i = cols.length - 1; cols[i] != undefined; i--) { mergeCell($(this), cols[i]); } dispose($(this)); }) }; function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放单元格内容 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 // 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan $('tbody tr', $table).each(function(index) { // td:eq中的colIndex即列索引 var $td = $('td:eq(' + colIndex + ')', this); // 获取单元格的当前内容 var currentContent = $td.html(); // 第一次时走次分支 if ($table.data('col-content') == '') { $table.data('col-content', currentContent); $table.data('col-td', $td); } else { // 上一行与当前行内容相同 if ($table.data('col-content') == currentContent) { // 上一行与当前行内容相同则col-rowspan累加, 保存新值 var rowspan = $table.data('col-rowspan') + 1; $table.data('col-rowspan', rowspan); // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 $td.hide(); // 最后一行的情况比较特殊一点 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan // 最后一行不会向下判断是否有不同的内容 if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 上一行与当前行内容不同 else { // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 if ($table.data('col-rowspan') != 1) { $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan $table.data('col-td', $td); $table.data('col-content', $td.html()); $table.data('col-rowspan', 1); } } }) } // 同样是个private函数 清理内存之用 function dispose($table) { $table.removeData(); } }, doExchange: function(doubleArrays) { // 二维数组,最先两个数组组合成一个数组,与后边的数组组成新的数组,依次类推,知道二维数组变成以为数组,所有数据两两组合 var len = doubleArrays.length; if (len >= 2) { var arr1 = doubleArrays[0]; var arr2 = doubleArrays[1]; var len1 = arr1.length; var len2 = arr2.length; var newLen = len1 * len2; var temp = new Array(newLen); var index = 0; for (var i = 0; i < len1; i++) { for (var j = 0; j < len2; j++) { temp[index++] = arr1[i] + ',' + arr2[j]; } } var newArray = new Array(len - 1); newArray[0] = temp; if (len > 2) { var _count = 1; for (var i = 2; i < len; i++) { newArray[_count++] = doubleArrays[i]; } } return step.doExchange(newArray); } else { return doubleArrays[0]; } } } }) </script> </body> </html> ``` ``` ```

大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了

大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

技术大佬:我去,你写的 switch 语句也太老土了吧

昨天早上通过远程的方式 review 了两名新来同事的代码,大部分代码都写得很漂亮,严谨的同时注释也很到位,这令我非常满意。但当我看到他们当中有一个人写的 switch 语句时,还是忍不住破口大骂:“我擦,小王,你丫写的 switch 语句也太老土了吧!” 来看看小王写的代码吧,看完不要骂我装逼啊。 private static String createPlayer(PlayerTypes p...

上班一个月,后悔当初着急入职的选择了

最近有个老铁,告诉我说,上班一个月,后悔当初着急入职现在公司了。他之前在美图做手机研发,今年美图那边今年也有一波组织优化调整,他是其中一个,在协商离职后,当时捉急找工作上班,因为有房贷供着,不能没有收入来源。所以匆忙选了一家公司,实际上是一个大型外包公司,主要派遣给其他手机厂商做外包项目。**当时承诺待遇还不错,所以就立马入职去上班了。但是后面入职后,发现薪酬待遇这块并不是HR所说那样,那个HR自...

女程序员,为什么比男程序员少???

昨天看到一档综艺节目,讨论了两个话题:(1)中国学生的数学成绩,平均下来看,会比国外好?为什么?(2)男生的数学成绩,平均下来看,会比女生好?为什么?同时,我又联想到了一个技术圈经常讨...

为什么本科以上学历的人只占中国人口的5%,但感觉遍地都是大学生?

中国大学生占总人口不到5% 2017年,中国整体的本科率仅有5.9%;如果算上研究生,这一比例可以进一步上升到6.5% 为什么在国家统计局推出的这份年鉴中,学历的最高一阶就是到研究生,而没有进一步再统计博士生的数量的。 原因其实并不难理解,相比全国和各省整体人口体量,博士生的占比非常之低,属于绝对意义上的小概率样本。 这一点,我们从上表中的各省研究生占比情况也可以看出端倪。除北京、天津、上海三...

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

程序员写出这样的代码,能不挨骂吗?

当你换槽填坑时,面对一个新的环境。能够快速熟练,上手实现业务需求是关键。但是,哪些因素会影响你快速上手呢?是原有代码写的不够好?还是注释写的不够好?昨夜...

外包程序员的幸福生活

今天给你们讲述一个外包程序员的幸福生活。男主是Z哥,不是在外包公司上班的那种,是一名自由职业者,接外包项目自己干。接下来讲的都是真人真事。 先给大家介绍一下男主,Z哥,老程序员,是我十多年前的老同事,技术大牛,当过CTO,也创过业。因为我俩都爱好喝酒、踢球,再加上住的距离不算远,所以一直也断断续续的联系着,我对Z哥的状况也有大概了解。 Z哥几年前创业失败,后来他开始干起了外包,利用自己的技术能...

带了6个月的徒弟当了面试官,而身为高级工程师的我天天修Bug......

即将毕业的应届毕业生一枚,现在只拿到了两家offer,但最近听到一些消息,其中一个offer,我这个组据说客户很少,很有可能整组被裁掉。 想问大家: 如果我刚入职这个组就被裁了怎么办呢? 大家都是什么时候知道自己要被裁了的? 面试软技能指导: BQ/Project/Resume 试听内容: 除了刷题,还有哪些技能是拿到offer不可或缺的要素 如何提升面试软实力:简历, 行为面试,沟通能...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

记录下入职中软一个月(外包华为)

我在年前从上一家公司离职,没想到过年期间疫情爆发,我也被困在家里,在家呆着的日子让人很焦躁,于是我疯狂的投简历,看面试题,希望可以进大公司去看看。 我也有幸面试了我觉得还挺大的公司的(虽然不是bat之类的大厂,但是作为一名二本计算机专业刚毕业的大学生bat那些大厂我连投简历的勇气都没有),最后选择了中软,我知道这是一家外包公司,待遇各方面甚至不如我的上一家公司,但是对我而言这可是外包华为,能...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

Python爬虫,高清美图我全都要(彼岸桌面壁纸)

爬取彼岸桌面网站较为简单,用到了requests、lxml、Beautiful Soup4

无代码时代来临,程序员如何保住饭碗?

编程语言层出不穷,从最初的机器语言到如今2500种以上的高级语言,程序员们大呼“学到头秃”。程序员一边面临编程语言不断推陈出新,一边面临由于许多代码已存在,程序员编写新应用程序时存在重复“搬砖”的现象。 无代码/低代码编程应运而生。无代码/低代码是一种创建应用的方法,它可以让开发者使用最少的编码知识来快速开发应用程序。开发者通过图形界面中,可视化建模来组装和配置应用程序。这样一来,开发者直...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

6年开发经验女程序员,面试京东Java岗要求薪资28K

写在开头: 上周面试了一位女程序员,上午10::30来我们部门面试,2B哥接待了她.来看看她的简历: 个人简历 个人技能: ● 熟悉spring mvc 、spring、mybatis 等框架 ● 熟悉 redis 、rocketmq、dubbo、zookeeper、netty 、nginx、tomcat、mysql。 ● 阅读过juc 中的线程池、锁的源...

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

Java岗开发3年,公司临时抽查算法,离职后这几题我记一辈子

前几天我们公司做了一件蠢事,非常非常愚蠢的事情。我原以为从学校出来之后,除了找工作有测试外,不会有任何与考试有关的事儿。 但是,天有不测风云,公司技术总监、人事总监两位大佬突然降临到我们事业线,叫上我老大,给我们组织了一场别开生面的“考试”。 那是一个风和日丽的下午,我翘着二郎腿,左手端着一杯卡布奇诺,右手抓着我的罗技鼠标,滚动着轮轴,穿梭在头条热点之间。 “淡黄的长裙~蓬松的头发...

大牛都会用的IDEA调试技巧!!!

导读 前天面试了一个985高校的实习生,问了他平时用什么开发工具,他想也没想的说IDEA,于是我抛砖引玉的问了一下IDEA的调试用过吧,你说说怎么设置断点...

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

97年世界黑客编程大赛冠军作品(大小仅为16KB),惊艳世界的编程巨作

这是世界编程大赛第一名作品(97年Mekka ’97 4K Intro比赛)汇编语言所写。 整个文件只有4095个字节, 大小仅仅为16KB! 不仅实现了3D动画的效果!还有一段震撼人心的背景音乐!!! 内容无法以言语形容,实在太强大! 下面是代码,具体操作看最后! @echo off more +1 %~s0|debug e100 33 f6 bf 0 20 b5 10 f3 a5...

程序员是做全栈工程师好?还是专注一个领域好?

昨天,有位大一的同学私信我,说他要做全栈工程师。 我一听,这不害了孩子么,必须制止啊。 谁知,讲到最后,更确定了他做全栈程序员的梦想。 但凡做全栈工程师的,要么很惨,要么很牛! 但凡很牛的,绝不是一开始就是做全栈的! 全栈工程师听起来好听,但绝没有你想象的那么简单。 今天听我来给你唠,记得帮我点赞哦。 一、全栈工程师的职责 如果你学习编程的目的只是玩玩,那随意,想怎么学怎么学。...

不要再到处使用 === 了

我们知道现在的开发人员都使用 === 来代替 ==,为什么呢?我在网上看到的大多数教程都认为,要预测 JavaScript 强制转换是如何工作这太复杂了,因此建议总是使用===。这些都...

立即提问
相关内容推荐