0

我已经修改了本教程中的代码（http://gazpo.com/2011/09/contenteditable/演示： http: //gazpo.com/downloads/tutorials/html5/contentEditable/），它将显示多个 div来自数据库的 contenteditable 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();  
    });
});

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

When one div is selected, every SAVE button appears, and when the data is saved, it shows the status bar for every div.

我要做的是获取所选跨度的 data-id 属性，以便它对于包装器、状态、contentedibable 部分和保存栏是唯一的。In a way, it is serving as the ID for the whole wrapped segment.How would I change the jquery/AJAX so that when that when a contenteditable div is selected, only that specific div will be modified, have the save button pop up on它，并显示状态栏（而不是每个显示）？

4

1 回答 1

1

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

IE

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

小提琴

于 2013-10-07T05:27:12.357 回答