需要一些有关创建 jEditable 自定义输入的指导

Question

我正在使用 jEditable 插件和以下代码在打开和关闭之间切换页面上的一系列设置。

$(document).ready(function() {
$('.editable_select').editable(''http://someexamplepage.com/save.php', { 
    indicator: '<img src="/images/spinner.gif">',
    data   : " {'&#x2713;':'&#x2713;','&#x2717;':'&#x2717;'} ",
    tooltip : 'Click to Edit',
    type   : 'select',
    onblur : 'submit',
    style  : 'inherit'
    });
});

然后在 html 中：

<b class="editable_select" id="setting1" style="display:inline">&#x2713;</b>

当单击指示打开的复选标记时，它会生成一个下拉菜单，其中包含打开的复选标记和关闭的 X，然后用户可以选择该菜单。我更喜欢的是单击 check/X 不会打开下拉菜单，而是将当前的 On 或 Off 设置发送到 save.php 文件。然后我可以只编写 save.php 文件来返回相反的值，这样单击就可以在两者之间切换而无需打开任何类型的编辑窗口。我尝试了以下代码：

$(document).ready(function() {
$('.editable_select').editable('http://someexamplepage.com/save.php', { 
    indicator: '<img src="/images/spinner.gif">',
    tooltip : 'Click to Edit',
    onclick : 'submit',
    style  : 'inherit'
});

});

但单击文本仍会打开一个小编辑窗口，这是我不想要的。我还是 JavaScript 和 jQuery 的新手，因此非常感谢任何帮助！

Answer 1

我不会为此使用插件，而是在 ready 事件上运行一个非常简单的 jQuery。

我会将当前状态作为数据属性包含在 DOM 中，因此将您的标签更改为：

<b class="editable_select" id="[ID FOR ITEM]" data-state="checked">&#2713;</b>

然后执行以下操作：

$(function(){
    var update_dom = function(data){
        var item_id = data.id;
        var state;
        data.state === 'checked' ? state = '✓' : state = '✗';
        $('#'+item_id).data('state', data.state).html(state);
    };

    var selected = function(evt){
        var item_id = $(this).attr('id');
        var state = $(this).data('state');
        $.ajax({
            url: PATH_TO_SCRIPT, 
            data: {id: item_id, state: state},
            type: "POST",
            success: update_dom
        });
    }

    $('.editable_select').click(selected);
});

这会将click 事件绑定到具有editable_select 类的所有内容。当您单击它时，它将调用selected 函数，该函数将从DOM 中获取数据，并调用您的脚本。当你的脚本完成后，它应该返回一个响应（JSON 在这里很好），并且success 处理程序将更新 DOM 并将状态显示给用户。