宝贵的一票

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-0517.阅读吧2023-06-05

18.宝贵的一票2023-06-08

19.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

宝贵的一票

任务

我们现在要完善一个投票模块
我们可以进行添加选项，当选项超过两个的时候显示删除选项的图标
当点击删除图标，会删除当前的图标，下面的选项自动浮上来，并文字内容保留，选项还是保持正常顺序

分类 jQuery

关键点

1. jQuery中标签选择器
   1. 通常的语法$(selector)
   2. 属性选择器 .class #id [attart] [attart=value]
   3. 包含选择器:has()
   4. 位置选择器 p:firset-child 第一个子元素 first last 第一个 最后一个 p:nth-child(odd)奇数行 p:even奇数行
2. jQuery中each遍历
   1. $(el).each((index,item)=>{})
   2. index是指的第几个元素
   3. item指的当前元素
   4. 在遍历中使用return false;等同于break是结束循环
3. 添加删除元素
   1. 使用el.append 添加到el元素内的最后的位置
   2. 使用el.remove 将el元素删除

代码实现 && 完整的代码

1. 完成CODE

   // 添加
   $(".add").click(function () {
     // TODO 待补充代码
     let len = $('.list .mb-3').length;
     let initList = initRender(`选项${len+1}`);
     $(".list").append(initList);
     if( len+1 > 2){
       $('.list .col-sm-1').remove();
       let template = `<div class="col-sm-1"><img class="del-icon" src="./images/x.svg" alt="" /></div>`
       $('.list .mb-3').each((index,item)=> $(item).append(template) )
     }
   });
   // 删除
   $(document).on("click", ".del-icon", function () {
     // TODO 待补充代码
     $(this).parent().parent().remove();
     let len = $('.list .mb-3').length;
     if(len <= 2) $('.list .col-sm-1').remove();
     $('.list .mb-3').find('.col-sm-2').each((index,item)=> $(item).text(`选项${index+1}`))
   });
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17465586.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！