0

我正在使用 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 的新手，所以非常感谢任何帮助！

4

1 回答 1

0

我不会为此使用插件，而是在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 并将状态显示给用户。

于 2013-01-15T19:37:04.660 回答