首页
学习
活动
专区
工具
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.png" alt="" width="100"> img src="HTML5...l  该函数返回一个坐标对象,该对象有一个left属性和top属性。Position()中的坐标参考系是以被定位的祖辈元素的左上角为原点(0,0),向右为正,向下为正。...l  如果当前JQ对象匹配多个元素,返回坐标时,postion()函数只以其中第一个匹配的元素为准。...4 is()判断所有元素中是否有符合某个条件的元素,返回布尔值           5  has()方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素 演示文档</title

1.4K20
  • JQuery的属性操作及事件

    )获取:选中元素.attr('属性名')console.log($('img').attr('index'));(2)设置:选中元素.attr('属性名','值')img src="https...页面刷新后,之前存储就会消失(1)获取:选中元素.data('属性名')$('img').data('a',5)(2)设置:选中元素.data('属性名','值')img src="https...(不会更改DOM结构),但是该属性是存在的,且可以获取输出②attr():在元素本身是可以看到设置的属性,也可以获取输出二、遍历操作1、区别(1)隐式迭代:给同一类元素做同样的操作(2)遍历操作:给同一类元素做不同的事情...left:30}) console.log($('.son').position());(3)滚动条:scrollTop()/sroclLeft()设置或获取元素被卷去的头部和左侧...,处理相同或不同的程序①处理相同的程序 $('button').on('click mouseenter',function(){ console.log('成功')

    1.7K70

    Web APIs第二天

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

    1.1K60

    使用 useState 需要注意的 5 个问题

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

    5K20

    day01jQuery节点操作

    "); var btns2 = document.getElementsByClassName("btn"); //使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素 //命名的时候为了和...获取及修改样式 多样式的修改语法与json的使用相同,其复合属性可使用"-"链接也可以首字母大写链接 img src="/img/cm1.jpg" alt=""> img src="/img...this).html()) } 5.2 焦点事件 当元素获取焦点及失去焦点时触发该事件,失去焦点blur,获取焦点focus //焦点事件,当输入框获取到焦点时改变其背景颜色 $('input').focus...针对通过动态添加到页面中的元素进行事件绑定(此处先做了解,动态增删时演示案例) 语法:$(已存在的父元素).on(事件名,子元素选择器,函数) //给删除标签添加点击事件 $('table').on(

    2700

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

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

    2.2K10

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

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

    5.7K20

    从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

    1、对样式的操作 1.1、点击按钮设置 div 的宽高和背景颜色 button" value="显示颜色" id="btn"> div id="dv">div...比如:css里面的 background-color,在js里面的写法是 backgroundColor. 1.2、点击按钮隐藏和显示 div 标签 button...1.5、点击小图在小图下显示大图 img src="images/Daotin.png"> img src="" id="im"...("name属性的值"); 4、根据 class 类样式的名字获取元素,返回值是包含多个元素对象的伪数组 document.getElementsByClassName("class类样式的值"); 5...(".class类样式的值"); 6、根据 CSS 选择器获取元素,返回值是包含多个元素对象的伪数组 document.querySelectorAll("#id属性的值"); document.querySelectorAll

    2.1K40

    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.9K41

    【Html.js——功能实现】布局切换(蓝桥杯真题-18556)【合集】

    布局容器: div id="layoutContainer" class="two-column-layout"> 是主要的布局容器,初始有 two-column-layout 类,包含三个 div...显示模式按钮点击事件: 为 switching 按钮添加点击事件监听器,当点击时,将 mode 元素(布局选项区域)的 display 属性设置为 flex,使其显示出来。 3....布局选项点击事件: 遍历 layoutOptions,为每个选项添加点击事件监听器。 当点击一个选项时,首先移除所有选项的 active 类名,然后给当前点击的选项添加 active 类名。....operates>svg 选中所有直接子元素为 svg 的元素,设置图标大小、底部间距、鼠标指针样式和填充颜色。 :hover 伪类为不同位置的图标设置鼠标悬停时的填充颜色。 5.....block>button 类设置复制按钮的样式,包括宽度、高度、背景颜色、文字颜色和鼠标指针样式。 :hover 伪类为复制按钮设置鼠标悬停时的背景颜色。 四、工作流程▶️ 1.

    5400

    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键时,在点击,才能触发事件...,直接书写为 :属性名 = ‘表达式’ img v-bind:src="imageSrc"> 等价于 img :src="imageSrc"> //绑定一个属性 //绑定多个属性 div v-bind

    2.4K00
    领券