JZTXT

宝贵的一票

发布时间 2023-06-08 11:04:30作者: GTK

习题链接

宝贵的一票

任务

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

分类 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}`))
});