标签 jQuery 下的文章

2021-07-12

jQuery+html+css实现选项卡功能直接上代码<div class="page-header float-right"> <div class="page-title"> <ol class="breadcrumb text-right"> <li onclick="changeTab(this,'chicang')" class="hide"><a href="#">持仓信息</a></li> <li onclick="changeTab(this,'xianjia')" class="active"><a href="#">限价委托</a></li> <li onclick="changeTab(this,'jihua')" class="hide"><a href="#">计划委托</a></li> </ol> </div> </div>/** *选项卡切换 */ function changeTab(a,type){ //获取选项卡状态,获取选中选项卡状态,更改选项卡状态,切换选项卡对应div的显示隐藏 var myli = jQuery(a).parent().children();//获取同级的所有元素 var sort = jQuery(a).index();//获取选中元素排第几个 //除了选中的其他都变隐藏,先全部变隐藏然后为选中的div更改样式 jQuery(".card").css('display','none'); switch (type) { case 'chicang': jQuery(".chicang").css('display','flex'); break; case 'xianjia': jQuery(".xianjia").css('display','flex'); break; case 'jihua': jQuery(".jihua").css('display','flex'); break; default: break; } console.log(myli); for (let index = 0; index <= myli.length; index++) { if(index != sort){//不是被选中的清除active添加hide // console.log(index+'-z-'+sort); jQuery(myli[index]).removeClass("active"); jQuery(myli[index]).addClass("hide"); //显示对应的div }else{//是被选中的添加active清除hide // console.log(index+'-x-'+sort); jQuery(myli[index]).removeClass("hide"); jQuery(myli[index]).addClass("active"); //显示对应点div } } // console.log(jQuery(a).index()); }

2021年07月12日
252 阅读
0 评论
0 点赞

2021-06-29

jQuery获取复选框选中状态有时候我们在使用复选框的时候会发现复选框选中了,但是input元素里却没有checked状态,因此在jQuery我们并不能获取到对应复选框选中的值var arr = new Array(); $("input[name='kaiguan']:checkbox[checked]").each(function(i){ arr[i] = $(this).val(); });因此使用上面的代码并不能很好的获取到值var arr = new Array(); jQuery("input[name='kaiguan']").each(function(i){ if (jQuery(this).is(':checked')) { arr.push(jQuery(this).val()); } }所以改用这个

2021年06月29日
181 阅读
0 评论
0 点赞

2021-04-26

2021年04月26日
2,320 阅读
1 评论
2 点赞

2021-04-23

通过jQuery向div或子div增加class $(".mui-off-canvas-wrap").addClass("hy"); $(".menu-list a").eq(1).children('.menu-row').addClass("selectMenu");

2021年04月23日
238 阅读
0 评论
0 点赞

2021-04-23

layui+php多图上传 layui图片上传可以一次性选择多个图片,然后选择多少张调用多少次上传接口设计思路:前端上传文件到后台,后台接收保存成功后返回图片路径,前端根据路径生成div,div包括img标签、隐藏的input（表单传值用）、删除按钮,点击删除按钮判断是第几个删除按钮并删除对应的标签前端页面: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多图上传</title> <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"> <script src="https://www.layuicdn.com/layui/layui.js"></script> <style> .up-img{ width: 100px; height: 100px; } #demo2 div button{ position: relative; top: -38px; left: -13px; } </style> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>上传多张图片</legend> </fieldset> <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; height: 142px;"> 预览图： <div class="layui-upload-list" id="demo2" ></div> </blockquote> </div> </body> <script> layui.use(['upload','jquery'],function () { $ = layui.jquery; var upload = layui.upload; //执行实例 var uploadInst = upload.render({ elem: '#test2' ,url: 'upload1.php' //改成您自己的上传接口 ,multiple: true ,before: function(obj){ //预读本地文件示例，不支持ie8 // console.log(obj); obj.preview(function(index, file, result){ // $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img up-img">') }); } ,done: function(res){ //上传完毕 $('#demo2').append('<div style="float: left;"><img src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img up-img" onclick="showeq(this)"><input type="hidden" name="image[]" value="'+res.msg+'" onclick="showinput(this)"><button onclick="del(this)">x</button></div>'); // $('#demo2').append(''); // $('#demo2').append(''); } }); }); function showeq(params) { var index = $("#demo2 img").index(params); console.log(index); } function showinput(params) { var index = $("#demo2 input").index(params); console.log(index); } function del(params) { var index = $("#demo2 button").index(params); $("#demo2 button").eq(index).remove(); $("#demo2 input").eq(index).remove(); $("#demo2 img").eq(index).remove(); // console.log(index); } </script> </html>php代码<?php $file = $_FILES["file"]; if ($file==null) { exit(json_encode(array('code'=>1, 'msg'=>'未上传图片'))); } // 获取文件后缀 $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); // 判断文件是否合法 if(!in_array($extension, array("gif","jpeg","jpg","png"))){ exit(json_encode(array('code'=>1, 'msg'=>'上传图片不合法'))); } $info = move_uploaded_file($file['tmp_name'], "./uploads/".$file['name']); //移动文件到指定目录建议文件名自己在修改一下 $img = '/uploads/'.$file['name']; exit(json_encode(array('code'=>0, 'msg'=>$img))); ?>

2021年04月23日
141 阅读
0 评论
0 点赞