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

Question

我已经修改了本教程中的代码（http://gazpo.com/2011/09/contenteditable/ 演示：http://gazpo.com/downloads/tutorials/html5/contentEditable/），它将显示来自数据库的多个 contenteditable div 的 div，并通过 AJAX 保存修改后的更改。

这是 PHP 生成的内容：http://jsfiddle.net/fmdx/78rWQ/

    <div data-id="0" class="wrap"><!-- Content Wrapper -->
      <div data-id="0" class="status"></div>
    <div data-id="0" class="content">
    <p data-id="0" style="padding-left:7px;">
            <span data-id="0" style="padding-right:10px;">a)</span>
            <span data-id="0" data-primary="1" data-comcounted="0" data-showcom="1" data-fileno="CTTEST" data-part="1" class="editable" contenteditable="true">Compliance with the terms and conditions of the Clearwater Ordinance as currently set forth by the City of Sheboygan.</span></p>
        </div>
      <button data-id="0" class="save">Save</button>      
    </div>

乘以该表中的行数。

这里是 Jquery/Ajax： $(document).ready(function() {

    $(".save").click(function (e) {     
        //how do I narrow down these variables to that specific grouping being selected?
        var text = $('.editable').html();
        var primary_key = $('.editable').attr('data-primary');
        var showcom = $('.editable').attr('data-showcom');
        var comcounted = $('.editable').attr('data-comcounted');
        var part = $('.editable').attr('data-part');
        var fileno = $('.editable').attr('data-fileno');

        $.ajax({
            url: 'save.php',
            type: 'POST',
            data: {
            text: text,
            primary_key: primary_key,
            showcom: showcom,
            comcounted: comcounted,
            part: part,
            fileno: fileno              
            },              
            success:function (data) {

                if (data == '1')
                {
                    $(".status")
                    .addClass("success")
                    .html("Data saved successfully")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
                else
                {
                    $(".status")
                    .addClass("error")
                    .html("An error occured, the data could not be saved")
                    .fadeIn('fast')
                    .delay(3000)
                    .fadeOut('slow');   
                }
            }
        });   
    });

    $(".editable").click(function (e) {
        $(".save").show();
        e.stopPropagation();
    });

    $(document).click(function() {
        $(".save").hide();  
    });
});

这个乘以从数据库返回的行数。

选择一个div时，出现每个保存按钮，当保存数据时，它会显示每个div的状态栏。

我要做的是获取所选范围的 data-id 属性，以便它对于包装器、状态、contentedibable 部分和该保存栏是唯一的。在某种程度上，它是作为整个包装段的id。我会如何更改jQuery / ajax，以便选择何时选择ContentEditabit div时，只有特定的div将被修改，弹出保存按钮它，并显示该状态栏（而不是每个都显示）？

Answer 1

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

即

$('.save').show(); 变为 $(this).closest('.content').next(".save").show() $('.editable').html(); 变为 $this.prev('.content').find('.editable') $('.status') 变为 $this.closest('.wrap').find(".status")

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');
        }
        });
    });

Fiddle