Judyone

Judyone 查看完整档案

其它编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Judyone 提出了问题 · 10月19日

解决将html转换为js,并且其中含有判断语句

一个layui框架的前端页面,希望将如下的代码转换为js

<script id="goodsDemo" type="text/html">
        {{#  layui.each(d, function(index, item){ }}
        <li>
          <div class="layui-row">
            <div class="layui-col-md1">
                <input name="like" lay-skin="primary" id={{item.id}} lay-filter="number" type="checkbox" />
                {{#if (item.imgUrl) { }}
                    <img data-original={{item.imgUrl}} data={{item.imgUrl}} style="width: 100px;height: 100px;">
                {{# }else{ }}
                    <p class="noimg">暂无图片</p>
                {{# } }}
            </div>
            <div class="layui-col-md7">
                <h3>{{item.name}}</h3>
              <p class="disTableCell starName">
                <span>SKU: <i>{{item.sku}}</i></span>
                <span>供应商: <i>{{item.supplierName}}</i></span>
              </p>
              <p class="disTableCell starName">
                <!-- <span>市场价: <i>¥{{item.price}}</i></span> -->
                <span>价格: <i style="color:#ff0201;font-weight: 700;">¥{{item.price}}</i></span>
                <span>上市时间: <i>{{item.createTime}}</i></span>
              </p>
              <!-- <p class="disTableCell starName">
              </p> -->
            </div>
            <div class="layui-col-md2">
              <button type="button" class="layui-btn" id={{item.sku}} style="border-radius:8px;margin-top:20px;">添加</button>
            </div>
          </div>
        </li>
        {{#  }); }}
    </script>

如下这样str拼接完之后,innerhtml渲染到ul中,可是不知道怎么在里面判断了,像是上面有一个对于imgurl的判断,想请教一下如何增加进去,谢谢

for (var i = 0; i < data.length; i++) {
            str+='<li>' +
                '<div class="layui-row">' +
                '<div class="layui-col-md1">' +
                '<input name="like" lay-skin="primary" id="'+data[i].id+'" lay-filter="number" type="checkbox" />' +....
                document.getElementById('goodsView').innerHTML = str;
}

关注 2 回答 1

Judyone 赞了回答 · 9月24日

解决js 截掉数组内字符串中的某个字符及之前的字符

inArr.map(item => item.replace(/^[^-]+--/, ''))

关注 2 回答 3

Judyone 赞了回答 · 9月24日

解决js 截掉数组内字符串中的某个字符及之前的字符

逻辑写反了……

== -1 表示没查着,没查着你还截?

关注 2 回答 3

Judyone 提出了问题 · 9月24日

解决js 截掉数组内字符串中的某个字符及之前的字符

原数组:var inArr=["标题1--子标题1","标题3--子标题2","还是个标题1","还是个标题1","标题2--子标题3"]

之后的数组:["子标题1","子标题2","还是个标题1","还是个标题1","子标题3"]

for(var i=0;i<inArr.length-1;i++){

     if(inArr[i].indexOf("--") == -1){

        inArr[i] = (inArr[i].split("--"))[1];

     }

 }

想着这也切掉来着,可是最后打印出来不但没有截掉,还让其他不含有"--"的undefined了???

关注 2 回答 3

Judyone 提出了问题 · 9月23日

解决jquery动态多条件筛选功能 一个元素后面加一个元素不起作用

image.png
需求是一个多条件筛选,动态生成第一类,然后鼠标hover展示第二类,所以想after在大类所属的span后面

$.each(obj.params, function (id, val) {

     span_param = $("<span class='canhover'></span>").text(val.value)

     var secondUl=$("<ul class='secondCateList'></ul>");

     $.each(val.secondParams, function (index, item) {

         var secondLi = $("<li>"+item.secondvalue+"</li>");

         secondUl.append(secondLi)

         })
         //往下面的三行的这里这里
         // span_param.after('<h4>569</h4>');
         //span_param.insertAfter(secondUl)
         span_param.append(secondUl)

         span_param.attr('value', val.id)

         div_params.append(span_param)

 })

image.png
上图是用了span_param.append(secondUl),这段ul就插入了span的内部
image.png
上图用了after 和insertAfter,然后ul就不见了....
我只想让每个ul插入每个对应的span的后面,各位大神走过路过不要错过,指点一下吧,谢谢!!!

关注 3 回答 2

Judyone 提出了问题 · 9月18日

layui 导航栏默认定位到主页

image.png

<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">

 <ul class="layui-nav">

     <li class="layui-nav-item layui-this">

        <a href="#" data-url="shopping" data-id="33" class="site-demo-active" data-type="tabAdd">主页</a>

     </li>

 <li class="layui-nav-item">

     <a href="javascript:;">123</a>

     <dl class="layui-nav-child">

         <dd>

            <a href="#" data-url="111" data-id="11" data-title="选项a" class="site-demo-active" data-type="tabAdd">选项a</a>

         </dd>

         <dd>

            <a href="#" data-url="b" data-id="22" data-title="选项b" class="site-demo-active" data-type="tabAdd">选项b</a>

         </dd>

     </dl>

 </li>

     <li class="layui-nav-item">

        <a href="#" data-url="111" data-id="33" class="site-demo-active" data-type="tabAdd">产品c</a>

     </li>

 </ul>

     <div class="layui-tab" lay-filter="demo" lay-allowclose="true">

         <ul class="layui-tab-title" style="display: none;">

         </ul>

         <div class="layui-tab-content">

         </div>

     </div>

 </div>

image.png
希望刚进入的时候就能定位到首页,就是shopping.html,天啦,第一次用layui,心态要爆炸了,看了一上午还是很晕,希望了解的走过路过,能给点小思路,谢谢各位了!!!

关注 2 回答 1

Judyone 赞了回答 · 9月11日

解决这种元素模块交界的地方的border-radius效果怎么做?

通过js给前后增加一个class吧。单纯的css 只能控制后面的、子级的

image.png

http://jsrun.net/KBLKp/edit

image.png

关注 7 回答 6

Judyone 提出了问题 · 9月9日

v-html出来的内容不占位置,导致footer浮上来了

image.png
其他页面都是好的,就商品详情里的内容是v-html出来的,然后footer就浮上来了,百度也没搜到解决方法

<template>
     <div class="g-page">
         <g-header></g-header>
         <g-nav></g-nav>
         <main>
            <g-main></g-main>
         </main>
         <g-footer></g-footer>
     </div>
</template>

我是这样把footer顺序放在main内容后面的,想请教一下路过的有没有经历过类似的情况,这能解决不??

关注 2 回答 1

Judyone 关注了问题 · 9月3日

鼠标移上小图,右边展示大图

当这个img全部展示的时候,鼠标移入,蓝色阴影部分会跟着移动,但当往下滑,img展示不全的时候,蓝色阴影就不跟着鼠标移动了,ev.clientY随着屏幕滚动,数值越来越小,所以导致蓝色阴影高度取值就有问题
image.png
图中红色箭头是箭头所在位置,但是无法让蓝色阴影跟随鼠标,太苦恼了

<div class="wrap">
      <div class="smallImg imgBox">
        <img :data-original="nowImg" width="400" />
        <div id="shadow"></div>
      </div>
      <div class="bigImg imgBox">
        <img :data-original="nowImg" width="800" />
      </div>
    </div>
    <div class="imgArr">
      <ul v-for="(item,index) in imgList" :key="index">
        <li :class="imgHover===index?'lightnow':''" @mouseover="setActiveItem(item,index)">
          <img :data-original="item.img" alt />
        </li>
      </ul>
    </div>
    <div style="height:800px"></div>
mounted() {
    window.onload = function () {
      var wrap = document.getElementsByClassName("wrap")[0];
      var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
      var smallImg = smallImgBox.getElementsByTagName("img")[0];
      var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
      var bigImg = bigImgBox.getElementsByTagName("img")[0];
      var shadow = document.getElementById("shadow");

      smallImgBox.onmouseover = function () {
        shadow.style.display = "block";
        bigImgBox.style.display = "block";
      };
      smallImgBox.onmouseout = function () {
        shadow.style.display = "none";
        bigImgBox.style.display = "none";
      };

      smallImgBox.onmousemove = function (ev) {
        var ev = ev || window.event;
        var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft;
        var y = ev.clientY - smallImgBox.offsetTop - wrap.offsetTop;
        var distanceTop= document.documentElement.scrollTop||document.body.scrollTop;

        var l = x - shadow.offsetWidth / 2;
        var t =  y - shadow.offsetWidth / 2;
        console.log(123,ev.clientY)

        if (l <= 0) {
          l = 0;
        } else if (l >= smallImgBox.offsetWidth - shadow.offsetWidth) {
          l = smallImgBox.offsetWidth - shadow.offsetWidth;
        }
        if (t <= 0) {
          t = 0;
        } else if (t >= smallImgBox.offsetHeight - shadow.offsetHeight) {
          t = smallImgBox.offsetHeight - shadow.offsetHeight;
        }
        shadow.style.left = l + "px";
        shadow.style.top = t + "px";

        var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
        var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight);
        bigImg.style.left = -radioX * (bigImg.width - bigImgBox.offsetWidth) + "px";
        bigImg.style.top = -radioY * (bigImg.height - bigImgBox.offsetHeight) + "px";
      };
    };
  },
.wrap {
  position: relative;
  height: 400px;
  width: 850px;
  margin: 20px 0 0 0px;
}
.wrap .smallImg,
.wrap .bigImg {
  position: absolute;
  top: 0;
  
  outline: 2px solid red;
  overflow: hidden;
}
.wrap .smallImg {
  left: 0;
  width: 400px;
  height: 400px;
}
.wrap .bigImg {
  left: 420px;
  display: none;
  width: 300px;
  height: 300px;
}
.wrap .smallImg img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.wrap .bigImg img {
  position: absolute;
  left: 0;
  top: 0;
}
#shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 150px;
  height: 150px;
  cursor: move;
  background: rgba(0, 0, 255, 0.5);
}
.lightnow {
  border: 1px solid black;
  width: 102px;
  height: 102px;
}
.imgArr {
  width: 1366px;
  height: 100px;
  margin-left:-40px;
  ul li {
    float: left;
    margin-right: 10px;
  }
  img {
    width: 100px;
    height: 100px;
  }
}

关注 1 回答 0

Judyone 提出了问题 · 9月2日

鼠标移上小图,右边展示大图

当这个img全部展示的时候,鼠标移入,蓝色阴影部分会跟着移动,但当往下滑,img展示不全的时候,蓝色阴影就不跟着鼠标移动了,ev.clientY随着屏幕滚动,数值越来越小,所以导致蓝色阴影高度取值就有问题
image.png
图中红色箭头是箭头所在位置,但是无法让蓝色阴影跟随鼠标,太苦恼了

<div class="wrap">
      <div class="smallImg imgBox">
        <img :data-original="nowImg" width="400" />
        <div id="shadow"></div>
      </div>
      <div class="bigImg imgBox">
        <img :data-original="nowImg" width="800" />
      </div>
    </div>
    <div class="imgArr">
      <ul v-for="(item,index) in imgList" :key="index">
        <li :class="imgHover===index?'lightnow':''" @mouseover="setActiveItem(item,index)">
          <img :data-original="item.img" alt />
        </li>
      </ul>
    </div>
    <div style="height:800px"></div>
mounted() {
    window.onload = function () {
      var wrap = document.getElementsByClassName("wrap")[0];
      var smallImgBox = wrap.getElementsByClassName("imgBox")[0];
      var smallImg = smallImgBox.getElementsByTagName("img")[0];
      var bigImgBox = wrap.getElementsByClassName("imgBox")[1];
      var bigImg = bigImgBox.getElementsByTagName("img")[0];
      var shadow = document.getElementById("shadow");

      smallImgBox.onmouseover = function () {
        shadow.style.display = "block";
        bigImgBox.style.display = "block";
      };
      smallImgBox.onmouseout = function () {
        shadow.style.display = "none";
        bigImgBox.style.display = "none";
      };

      smallImgBox.onmousemove = function (ev) {
        var ev = ev || window.event;
        var x = ev.clientX - smallImgBox.offsetLeft - wrap.offsetLeft;
        var y = ev.clientY - smallImgBox.offsetTop - wrap.offsetTop;
        var distanceTop= document.documentElement.scrollTop||document.body.scrollTop;

        var l = x - shadow.offsetWidth / 2;
        var t =  y - shadow.offsetWidth / 2;
        console.log(123,ev.clientY)

        if (l <= 0) {
          l = 0;
        } else if (l >= smallImgBox.offsetWidth - shadow.offsetWidth) {
          l = smallImgBox.offsetWidth - shadow.offsetWidth;
        }
        if (t <= 0) {
          t = 0;
        } else if (t >= smallImgBox.offsetHeight - shadow.offsetHeight) {
          t = smallImgBox.offsetHeight - shadow.offsetHeight;
        }
        shadow.style.left = l + "px";
        shadow.style.top = t + "px";

        var radioX = l / (smallImgBox.offsetWidth - shadow.offsetWidth);
        var radioY = t / (smallImgBox.offsetHeight - shadow.offsetHeight);
        bigImg.style.left = -radioX * (bigImg.width - bigImgBox.offsetWidth) + "px";
        bigImg.style.top = -radioY * (bigImg.height - bigImgBox.offsetHeight) + "px";
      };
    };
  },
.wrap {
  position: relative;
  height: 400px;
  width: 850px;
  margin: 20px 0 0 0px;
}
.wrap .smallImg,
.wrap .bigImg {
  position: absolute;
  top: 0;
  
  outline: 2px solid red;
  overflow: hidden;
}
.wrap .smallImg {
  left: 0;
  width: 400px;
  height: 400px;
}
.wrap .bigImg {
  left: 420px;
  display: none;
  width: 300px;
  height: 300px;
}
.wrap .smallImg img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.wrap .bigImg img {
  position: absolute;
  left: 0;
  top: 0;
}
#shadow {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: 150px;
  height: 150px;
  cursor: move;
  background: rgba(0, 0, 255, 0.5);
}
.lightnow {
  border: 1px solid black;
  width: 102px;
  height: 102px;
}
.imgArr {
  width: 1366px;
  height: 100px;
  margin-left:-40px;
  ul li {
    float: left;
    margin-right: 10px;
  }
  img {
    width: 100px;
    height: 100px;
  }
}

关注 1 回答 0

认证与成就

  • 获得 0 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 7 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-01-06
个人主页被 108 人浏览