Php 需要一些关于创建自定义输入的指导吗

我使用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>

单击指示On的复选标记时，它会生成一个下拉菜单，其中的复选标记表示On，X表示Off，然后用户可以选择该菜单。我更喜欢的是，单击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，因此非常感谢您的帮助

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

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

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

---

这会将click事件绑定到具有可编辑_select类的所有内容。当您单击它时，它将调用所选函数，该函数将从DOM获取数据，并调用您的脚本。当您的脚本完成后，它应该返回一个响应，JSON在这里很好，成功处理程序将更新DOM并向用户显示状态。

您可以制作一个JSFIDLE或提供一个实例吗？但是老实说，如果您只是想在后端记录一个单击操作，那么只需为这些按钮的单击事件编写一个侦听器，并将其连接到$.ajax调用中即可。不需要使用插件。。我主要关注PHP和MySQL，所以我对Javascript和jQuery有一个非常基本的了解，这就是为什么我在可能的情况下尝试使用预先制作的插件。我很感谢这些帮助，但作为Javascript新手，我并不100%清楚哪些部分应该保持原样，哪些部分是占位符。我在这里开始了一个JSFIDLE：只需替换PATH\u to\u脚本，它几乎就可以完成全部工作。这将捕获元素上的单击事件，将当前状态发送到后端，接收新的状态对象，并将可视显示和数据属性设置为服务器返回的值。我明白了。我不确定更新的部分；它看起来像某种信息应该被我取代，因为它周围没有引用。需要明确的是，如果我在后端使用PHP作为路径到脚本，那么无论我在最后回显什么，都会显示出来，对吗？到目前为止，这就是我的工作方式。您将需要向客户端返回一个JSON文档。因此，脚本的输出应该有一个内容类型：application/json，内容应该是{id:ITEM_id，state:NEW_state}，这两个值是可变的。

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