首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当多个帖子的点击有相同的div类和button类时,获取img src

的方法可以通过以下步骤实现:

  1. 使用前端开发技术,如HTML、CSS和JavaScript,来获取帖子的div元素和button元素。可以使用document.querySelector()或document.getElementsByClassName()等方法来选择相应的元素。
  2. 通过JavaScript代码监听按钮的点击事件。可以使用addEventListener()方法来为按钮添加点击事件的监听器。
  3. 在点击事件的处理函数中,可以使用DOM操作方法来获取div元素下的img元素。可以使用querySelector()或getElementsByTagName()等方法来选择相应的元素。
  4. 获取到img元素后,可以通过其src属性来获取图片的URL。可以使用getAttribute()方法来获取src属性的值。

以下是一个示例代码:

代码语言:txt
复制
// 获取帖子的div元素和button元素
var divElements = document.getElementsByClassName('post-div');
var buttonElements = document.getElementsByClassName('post-button');

// 为按钮添加点击事件的监听器
for (var i = 0; i < buttonElements.length; i++) {
  buttonElements[i].addEventListener('click', function() {
    // 获取点击按钮所在的帖子的div元素
    var divElement = this.closest('.post-div');
    
    // 获取div元素下的img元素
    var imgElement = divElement.querySelector('img');
    
    // 获取img元素的src属性值
    var imgSrc = imgElement.getAttribute('src');
    
    // 打印img src
    console.log(imgSrc);
  });
}

这样,当点击帖子中的按钮时,就可以获取到对应帖子的img src。根据具体的业务需求,可以进一步处理获取到的img src,例如展示图片、保存图片等操作。

关于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的产品,如对象存储 COS(https://cloud.tencent.com/product/cos)用于存储图片,或者云函数 SCF(https://cloud.tencent.com/product/scf)用于处理点击事件等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Jquery属性操作和DOM操作

规定添加或移除一个或多个名。如需规定若干个,请使用空格分隔名。 2. Function(index,currentclass)可选。规定返回需要添加/删除一个或多个函数。...src="HTML5.png" alt="" width="100"> <img src="HTML5...l  该函数返回一个坐标对象,该对象一个left属性top属性。Position()中坐标参考系是以被定位祖辈元素左上角为原点(0,0),向右为正,向下为正。...l  如果当前JQ对象匹配多个元素,返回坐标,postion()函数只以其中第一个匹配元素为准。...4 is()判断所有元素中是否符合某个条件元素,返回布尔值           5  has()方法返回拥有匹配指定选择器一个或多个元素在其内所有元素 演示文档</title

1.4K20
  • Web APIs第二天

    事件是在编程系统内发生动作或者发生事情, 比如用户在网页上单击一个按钮 事件是在编程系统内发生动作或者发生事情, 比如点击按钮 click 2. 什么是事件监听?...淘宝点击关闭二维码 // 核心:利用样式显示隐藏完成, display:none 隐藏元素 display:block 显示元素 <img src="images...小按钮做法 给多个元素绑定相同事件 for (let num5 = 0; num5 < num2.length; num5++) { num2[num5].addEventListener('click...回调函数 如果将函数 A 做为参数传递给函数 B ,我们称函数 A 为回调函数 简单理解: 一个函数当做参数来传递给另外一个函数时候,这个函数就是回调函数 点击...Tab栏切换 ①点击当前选项卡,当前添加,其余兄弟移除, 排他思想 ②下面模块盒子全部隐藏,当前模块显示 //需求:点击不同选项卡,底部可以显示 不同内容 <div class="wrapper

    1.1K60

    使用 useState 需要注意 5 个问题

    然而,我们经常需要在应用程序中管理多个状态片段,例如从外部服务器检索数据或在应用程序中更新数据。 状态管理困难是今天存在如此多状态管理库原因,而且更多库仍在开发中。...众所周知,hook 在 React 组件开发中变得越来越重要,特别是在功能组件中,因为它们已经完全取代了对基于组件需求,而基于组件是管理状态组件传统方式。...但是这个计划更新还处于过渡阶段,我们继续点击“Add +1”按钮三次,将当前状态更新为5(即2 +1 +1 +1 = 5)。...{changeName}>Change name ); } 点击按钮前初始状态: image.png 点击按钮后更新状态: image.png 正如你所看到...{changeName}>Change name ); } 结果将与上一个状态相同

    5K20

    Web前端知识系列(包括web前端全部知识点)

    我是段落我是段落 使用第二种方式虽然可以解决一部分代码抽取问题,但是对于大型网站来说,也是无法解决根本问题,例如,一个网站多个站点,每一个页面可能都会有相同...根据显示类型,主要可以分为3大 块级标签 独占一行标签 能随时设置宽度高度(比如div、p、h1、h2、ul、li) 行内标签(内联标签) 多个行内标签能同时显示在一行 宽度高度取决于内容尺寸...(class1 class2 class3...)给某个元素添加多个 CSS 添加多个, 名使用空格隔开 $ (‘div’).addClass(‘myClass1 myClass2'); 升级版...对象获取属性值以www开头对象获取属性值以cn结尾对象获取属性值包涵it...顾名 思义,向上收缩(卷动)向下展开(滑动) 注意:滑动、卷动效果显示、隐藏效果一样,具有相同参数。

    2.2K10

    React学习笔记(二)—— JSX、组件与生命周期

    src={user.avatarUrl}>; 在属性中嵌入 JavaScript 表达式,不要在大括号外面加上引号。...组件将应用UI拆分成独立、可复用模块,React 用任厅止定田一个一个组件搭建而成。 定义一个组件两种方式,便用ES 6 class(组件)使用函数(函数组件)。...我们为每一个帖子增加一个“点赞”按钮每点击一次,该帖子点赞数增加1。...我们对这两个组件进行重新设计,将PostList 设计为状态组件,负责帖子列表数据获取以及点赞行为处理,将PostItem设计为无状态组件,只负责每一个帖子 展示。...//给Greeting属性中name值指定默认值。组件引用时候,没有传入name属性,会使用默认值。

    5.6K20

    JavaScript DOM 操作可以改变网页内容、结构样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

    获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div...区别 获取内容区别: innerText会去除空格换行,而innerHTML会保留空格换行 设置内容区别: innerText不会识别html,而innerHTML会识别...标准 保留空格换行 div.innerHTML = '今天是: 2019'; // 这两个属性是可读写 可以获取元素里面的内容...常用元素属性操作 1. innerText、 innerhTML 改变元素内容 2. src、href 3. id、alt、title 获取属性值 元素对象.属性名 设置属性值 元素对象....= '被点击了'; // 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用 // btn.disabled =

    2.8K41

    Vue指令 - 从零开始学Vue2

    指令职责是,表达式值改变,将其产生连带影响,响应式地作用于 DOM。...不满足条件元素被设置style="display:none"样式 //v-if指令满足条件是,会渲染到html中,不满足条件,是不会渲染到html中 ​ v-if 指令更高切换消耗 v-if...条件成立时候会将元素加上,不成立时候,就会移除dom,并且内部指令不会执行 v-show 指令更高初始渲染消耗 v-show只是简单隐藏显示 如果需要频繁切换使用 v‐show 较好,如果在运行时条件不大可能改变...@click.ctrl="fn"> 按下按键中只要有ctrl即可,他可以其他按键 且只有按下ctrl键,在点击,才能触发事件...,直接书写为 :属性名 = ‘表达式’ 等价于 //绑定一个属性 //绑定多个属性 <div v-bind

    2.4K00

    事件基础及操作元素

    网页中每个元素都可以产生某些可以触发 JavaScript 事件,例如,我们可以在用户点击某按钮产生一个 事件,然后去执行某些操作。 1.2....区别 获取内容区别: innerText会去除空格换行,而innerHTML会保留空格换行 设置内容区别: innerText不会识别html,而innerHTML会识别...标准 保留空格换行        div.innerHTML = '今天是: 2019';        // 这两个属性是可读写 可以获取元素里面的内容...获取属性值 元素对象.属性名 设置属性值 元素对象.属性名 = 值 案例代码    刘德华    <button id...如果想要保留原先名,我们可以这么做 多名选择器            // this.className = 'change';            this.className = 'first

    1.4K20

    Web APIs第一天

    通过 JS 设置/修改标签元素属性,比如通过 src更换 图片 最常见属性比如: href、title、src 等 let num = document.querySelector('img') //...是使用新值换旧值, 如果需要添加一个,需要保留之前名 可以同时修改多个样式 直接使用 className 赋值会覆盖以前名 // 使用ClassName修改样式 可修改多个样式 但会覆盖以前名...通过 classList 操作控制CSS 为了解决className 容易覆盖以前名,我们可以通过classList方式追加删除名 修改大量样式更方便 修改不多样式时候方便 classList...设置/修改DOM元素属性 表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框 正常属性取值 跟其他标签属性没有任何区别 获取: DOM对象.属性名, 设置:... <h3 class

    1.8K30
    领券