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中的文本为新的排序值

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