JQuery：如何按数据选择类的特定元素，然后用作目标？

我修改了本教程中的代码（Demo:），该代码将显示数据库中不止一个div的contenteditable div，并通过AJAX保存修改后的div的更改

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

以下是PHP产生的结果：

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

该值乘以从数据库返回的行数

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

选择一个div时，将显示每个保存按钮，保存数据时，将显示每个div的状态栏

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

---

我试图做的是获取所选范围的数据id属性，以便它对于包装器、状态、contentedibable部分和该保存栏是唯一的。在某种程度上，它是作为整个包装段的ID。我如何更改jquery/AJAX，以便在选择contenteditable div时，只修改特定的div，在其上弹出save按钮，并显示状态栏（而不是显示每个div）？

您需要使选择器特定于当前正在运行的元素

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

i、 e

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

$（'.save'）.show（）变成
$（this）.最近（'.content'）。下一步（“.save”）.show（）
$（'.editable'）.html（）变为
$this.prev（'.content'）.find（'.editable'）
$（'.status'）
变成
$this.closest（'.wrap'）。查找（“.status”）

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

JS:

$(".editable").click(function (e) {
    $(this).closest('.content').next(".save").show(); //<-- select the specific one
    e.stopPropagation();
});


 $(".save").click(function (e) {
        var $this = $(this),
            $editable = $this.prev('.content').find('.editable'),
            text = $editable.html(),
            primary_key = $editable.data('primary'),
            showcom = $editable.data('showcom'),
            comcounted = $editable.data('comcounted'),
            part = $editable.data('part'),
            fileno = $editable.data('fileno');

        $.ajax({
            url: '/echo/json',
            type: 'POST',
            data: {
                text: text,
                primary_key: primary_key,
                showcom: showcom,
                comcounted: comcounted,
                part: part,
                fileno: fileno
            },
            success: function (data) {
                var mg = "An error occured, the data could not be saved";
                if (data == '1') {
                    mg = "Data saved successfully";
            }
            $this.closest('.wrap').find(".status")
                .addClass("success")
                .html(mg)
                .fadeIn('fast')
                .delay(3000)
                .fadeOut('slow');
        }
        });
    });

$（“.editable”）。单击（函数（e）{
$（this）.closest（“.content”）.next（“.save”）.show（）；//下面的答案对您有帮助吗我正在输入代码，但在保存时没有显示状态栏（错误或成功）.查看数据库，我也没有看到更改，所以我正在查看ajax，以确保我没有试图将其保存到一块皮棉上。但您似乎让我走上了正确的轨道，只是尝试解决问题。谢谢！我必须将echo/json更改为指向save.php，瞧，它工作得很好（这就解释了为什么之前无论成功与否它都不会显示状态栏）。@fmdx哦，是的，我把它放在fiddler中测试。如果出现错误，你会如何修改状态栏？在最初的教程中，他们有代码，但由于你修改了if语句，我似乎无法让它正常工作（在CSS中，有一个类可以在出现错误时使状态栏的背景变为红色，目前不管消息是什么，状态栏是绿色的，这对用户来说有点视觉上的错误）@fm oh i Din注意到，您可以像消息一样设置该类。像这样