jquery ajax双击div可直接修改div中的内容

网络编程 2025-03-13 14:51www.168986.cn编程入门

JQuery双击Div实现直接修改内容——排序值轻松改

在后台功能开发中,经常需要对排序字段进行修改。为了简化操作,提高用户体验,我们可以利用jQuery实现双击Div直接修改排序值的功能。

HTML部分:

```html

{$sort}

```

JavaScript部分:

```javascript

// 双击Div实现排序值修改

$('.changeSort').dblclick(function(){

var url = "{:U('setSort')}"; // 假设这是你的排序值设置接口

var divElement = $(this);

var id = divElement.attr('id'); // 获取当前Div的ID

var originalText = divElement.text(); // 获取当前Div中的文本(即当前的排序值)

// 创建一个输入框并设置其值为当前文本,同时添加失去焦点的事件处理函数

var inputElement = $("").val(originalText);

inputElement.blur(function(){

// 当输入框失去焦点时,发送Ajax请求保存新的排序值

var newText = $(this).val(); // 获取新的排序值

$.ajax({

url: url, // 请求的URL地址

type: 'POST', // 请求方式为POST

data: {'tid': id, 'sort': newText}, // 发送到服务器的数据

dataType: 'json', // 期望返回的数据类型

success: function(response){ // 请求成功后的回调函数

if(response.flag == 1){ // 如果服务器响应表示成功

layer.msg(response.msg); // 提示成功信息(假设layer是一个已经引入的提示库)

// 移除输入框,并更新Div中的文本为新的排序值

未知领域:深入理解文章内容的新篇章

上一篇:JavaScript仿微博输入框效果(案例分析) 下一篇:没有了

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by