526互联

大电影

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

习题链接

大电影

任务

我们现在要完善一个对商品添加喜欢的一个模块
并且当点亮星以后，会弹出一共提示框，2s后自动消失

分类 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中设置属性attr
    1. el.attr(属性名) 获取其属性值
    2. el.attr({属性名:属性值}) 设置属性值
    3. el.prop() 用法与attr一样，但是attr有一些属性无法成功设置，可换prop设置
    4. el.removeAttr("disabled")删除属性
  3. jQuery中的动画
    1. hide() 隐藏
    2. show() 显示
    3. fadeIn() 显示
    4. fadeOut() 隐藏
    5. 以上所有的方法都可以传入一个时间，有一个过渡效果

代码实现 && 完整的代码

  1. 完成CODE
    $('.card-body-options').find('img').click(function () {
    if($(this).attr('src') == './images/hollow.svg'){
      $(this).attr({'src':'./images/solid.svg'});
      $('#toast__container').show();
      setTimeout(() => $('#toast__container').hide(), 2000);
    }
    else  $(this).attr({'src':'./images/hollow.svg'});  
})