Southern Wind 2022-10-11 11:12 采纳率: 50%
浏览 34
已结题

jq获取动态标签并添加图片

img


想要达成这样的效果
这是一个缩略轮播图,每个缩略图都有不同的多个p标签。现在已经实现点击右侧不同的p标签后添加一个img节点,我这段代码问题在于点击第一页的p标签后,每页都会添加一个img,我只想点击第一页的p标签来显示第一页的三组图片,点击第二页显示对应的多组图片,有人有好的写法嘛,我的jQuery用的不是很好。

    /* 小缩略图的点击事件 */
    $('.mySwiper .swiper-slide').click(function () {
      console.log($(this).index());
    })

    /* 每一页的图片 */
    var obj = {
      arr1: ['./images/c1OFC.png', './images/c1SF.png',],
      arr2: ['./images/c2ACA.png', './images/c2OFC.png', './images/c2SF.png']
    }
    /* 文字的点击事件 */
    $("p").click(function () {
      if ($(this).hasClass("selected")) {
        $(this).removeClass("selected");
        $('.bg:eq(0)').remove($img)

      } else {
        /* 添加颜色 */
        $(this).addClass("selected");
        var $img = $("").attr('src', obj.arr1[$(this).index()]).addClass('bg')
        $('.bg1').after($img)
      }
    });

img

img

img

  • 写回答

2条回答 默认 最新

  • _yangyi 2022-10-11 11:48
    关注

    我推测应该是你用class选择器的缘故,你给每页用不同的class名或者用id选择器试试

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月19日
  • 已采纳回答 10月11日
  • 创建了问题 10月11日

悬赏问题

  • ¥30 电脑误删了手机的照片怎么恢复?
  • ¥15 (标签-python|关键词-char)
  • ¥15 python+selenium,在新增时弹出了一个输入框
  • ¥15 苹果验机结果的api接口哪里有??单次调用1毛钱及以下。
  • ¥20 学生成绩管理系统设计
  • ¥15 来一个cc穿盾脚本开发者
  • ¥15 CST2023安装报错
  • ¥15 使用diffusionbert生成文字 结果是PAD和UNK怎么办
  • ¥15 有人懂怎么做大模型的客服系统吗?卡住了卡住了
  • ¥20 firefly-rk3399上启动卡住了