<div class="ui message" style="height: 60px;"> <div class="item"> <div class="content"> <div class="header"><i class="thumbs up outline icon"></i>评论和@</div> <div class="extra">10 分钟前</div> </div> </div> </div> <div class="ui message" style="height: 60px;"> <div class="item"> <div class="content"> <div class="header"><i class="user outline icon"></i>点赞和收藏</div> <div class="extra">30 分钟前</div> </div> </div> </div> 如何将以上两个div绑定两个点击事件

时间: 2024-01-17 16:03:08 浏览: 64

你可以使用jQuery来绑定这两个div的点击事件，代码如下： ```javascript $(document).ready(function() { // 绑定第一个div的点击事件 $('.ui.message .header i.thumbs.up.outline.icon').on('click', function() { // 这里写点击事件的代码 console.log('您点击了评论和@'); }); // 绑定第二个div的点击事件 $('.ui.message .header i.user.outline.icon').on('click', function() { // 这里写点击事件的代码 console.log('您点击了点赞和收藏'); }); }); ``` 这里使用了jQuery选择器来选中两个div中的图标，然后使用`.on()`方法来绑定点击事件。当用户点击这两个图标时，会在控制台输出相应的提示信息，你可以将这里的代码替换成你自己的逻辑。

<div class="ui message" style="height: 60px;"> <div class="item"> <div class="content"> <div class="header"><i class="thumbs up outline icon"></i>评论和@</div> <div class="extra">10 分钟前</div> </div> </div> </div> 如何将以上代码改为一个按钮

您可以使用 Semantic UI 中的按钮组件将其转换为一个按钮，代码如下： ```html <button class="ui button"> <div class="ui message" style="height: 60px;"> <div class="item"> <div class="content"> <div class="header"><i class="thumbs up outline icon"></i>评论和@</div> <div class="extra">10 分钟前</div> </div> </div> </div> </button> ``` 这样就会将整个 `<div>` 包裹在一个按钮中，并且用户可以通过点击该按钮执行相应的操作。

const createMessage = (type, message) => { const $message = $(`<div class="message ${type == 'success' ? 'success' : 'danger'}" >${message}</div>`) $('body').append($message); $($message).animate({ top: '-300px', }, 1800) setTimeout(() => { $($message).remove() }, 2000) } const dialog = ({ title, content }, callback = () => { }) => { const $alert = $(`<div id="dialog-confirm" title="${title}"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>${content}</p> </div>`) $('body').append($alert) $('#dialog-confirm').dialog({ resizable: false, height: 140, modal: true, buttons: { "confirm": function () { callback() $(this).dialog('close') $($alert).fadeOut(3000).remove() }, "cancel": function () { $(this).dialog('close') $($alert).fadeOut(3000).remove(); }什么意思

这是一段 JavaScript 代码，其中包含了两个函数： 1. `createMessage` 函数：用于在网页中生成一个消息提示框，包括消息类型（成功或失败）和消息内容。具体实现如下： - 通过 jQuery 创建一个带有类名为 `message` 的 `<div>` 元素，根据消息类型添加额外的 `success` 或 `danger` 类名，并在元素内容中添加消息内容。 - 将该元素添加到 `<body>` 元素中。 - 使用 `animate()` 方法使该元素向上移动并逐渐消失。 - 使用 `setTimeout()` 方法在 2 秒后移除该元素。 2. `dialog` 函数：用于在网页中显示一个对话框，包括标题和内容，并提供“确认”和“取消”两个按钮。具体实现如下： - 通过 jQuery 创建一个带有 id 为 `dialog-confirm` 的 `<div>` 元素，标题和内容由传入的参数决定。 - 将该元素添加到 `<body>` 元素中。 - 使用 jQuery UI 提供的 `dialog()` 方法将该元素转换为对话框，并设置其属性，包括不能调整大小、高度为 140 像素、模态（即阻止用户在对话框外操作）、按钮为“确认”和“取消”。 - 当用户点击“确认”按钮时，执行回调函数（如果有），关闭对话框并移除该元素。 - 当用户点击“取消”按钮时，仅关闭对话框并移除该元素。

阅读全文

<div class="ui message" style="height: 60px;"> <div class="item"> <div class="content"> <div class="header"><i class="thumbs up outline icon"></i>评论和@</div> <div class="extra">10 分钟前</div> </div> </div> </div> 如何将以上代码改为一个按钮

相关推荐

优化的div+css ID与class命名规范解析

CSS <div>与<span>的区别及其应用

Vue.js教程：v-bind详解与class、style用法示例

在vue中使用v-bind:class的选项卡方法

Django后端分离实践：Element-UI文件上传教程

Element-UI多文件上传全攻略：从新手到专家的10大秘诀

Element-UI上传组件最佳实践：性能优化与异常处理的5大建议

高级UI设计：添加动画效果和自定义样式

Element-UI上传组件国际化与本地化：打造多语言文件上传界面

揭秘Element-UI上传组件：前端多文件上传的7大技巧

优化性能：UI渲染速度与响应性

Element UI常用组件详解

使用 Element UI 进行快速界面开发

怎么用element-ui写上传图片，要求：只能上传一张，多次上传会覆盖前一张，如果上传成功上传组件消失，显示上传的图片

element ui登录页面

element-ui上传头像

element ui响应式布局登录页

vue2.0 element-ui登录样式

最新推荐

伺服驱动器调试雷赛摆轮参数设置.docx

Python中快速友好的MessagePack序列化库msgspec

管理建模和仿真的文件

STM32 HAL库函数手册精读：最佳实践与案例分析

如何利用FineReport提供的预览模式来优化报表设计，并确保最终用户获得最佳的交互体验？

大学生社团管理系统设计与实现

"互动学习：行动中的多样性与论文攻读经历"

STM32 HAL库深度解析：新手到高手的进阶之路

如何使用pyCUDA库在GPU上进行快速傅里叶变换（FFT）以加速线性代数运算？请提供具体的代码实现。

基于Netbeans和JavaFX的宿舍管理系统开发与实践