在 jQuery Success Function 上查找特定的 DOM

Posted 2023-05-09

【中文标题】在 jQuery Success Function 上查找特定的 DOM

【英文标题】：Find specific DOM on jQuery Success Function

【发布时间】：2012-10-01 14:19:57

【问题描述】：

我的页面循环可编辑和更新的数据库值，无需通过 ajax 刷新。 逻辑工作得很好，但我无法让成功消息正确行动。截至目前，消息在所有 div 的类 .status 上闪烁...我已经尝试过 prevAll、parents、closest 等，但无法完全让消息仅显示在单击的表单上。

$(document).ready(function()       
    $(".save").click(function (e)          
        var content = $(this).prevAll('.editable').html();  
        var item = $(this).prevAll('.item').html(); 

    $.ajax(
        url: 'save.php',
        type: 'POST',
        data: content: content, item: item,               
        success:function (data) 
            if (data == '1')
                $(".status")
                .addClass("success")
                .html("Data saved successfully")
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');   
            
         
     );        
     );
);

表单结构（记住，它是循环的）。

<div id="wrap">
    <div class='status'></div>
    <div id='content'>
        <div class='editable' contentEditable='true' ></div>
        <div class="item"></div>    
        <button class="save" style="display:none">Save</button>
    </div>
</div>

【问题讨论】：

您提到您想在表单中显示一条消息，如下所示：“我已经尝试过 prevAll、parents、closest 等，但无法完全让消息仅显示在被点击的表单”。表单的代码在哪里？

没有表格。我正在使用 jquery 实时编辑 div 并将结果发送到数据库。 @ComputerArts 解决方案成功了！

【参考方案1】：

那是因为您没有指定要点亮哪个.status。

Here's a fiddle.

PS：我修改了一些代码让它在 jsiddle 中工作，所以你需要适应。

PS2：我建议你使用类名而不是 id，因为我猜测它们会重复并且 id 应该是唯一的。

$(document).ready(function()       
        $(".save").click(function (e)          
            var content = $(this).prevAll('.editable').html();  
            var item = $(this).prevAll('.item').html();
            var statusItem = $(this).parents('.wrap').find('.status');
        $.ajax(
            url: '/echo/html',
            type: 'POST',
            data: content: content, item: item,               
            success:function (data) 
                //if (data == '1')
                     statusItem
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                //
             
         );        
         );
    );

【讨论】：

我知道你在那里做了什么。我知道有一种简单的方法可以找到 .status div！感谢您的帮助！