jQuery内联编辑选择器

我在客户端有一个功能性的内联编辑脚本，但是我想添加一个按钮，如

，当有人单击按钮时，它应该能够选择值，就像我的悬停选择器工作并生成表单一样

简而言之，我想将悬停状态选择器删除为单击按钮选择器

查看代码以了解更多信息：

<div id="pesa"><p>PERSONAL INFORMATION</p>
    <ul>
        EMAIL:<li class="editable"><?php echo $email;?></li><input type="button" value="edit here">
        NAME:<li class="editable"><?php echo $name;?></li><input type="button" value="edit here">
        TELLPHONE:<li class="editable"><?php echo $tel;?></li>
        COUNTRY:<li class="editable"><?php echo $country;?></li>
        CITY:<li class="editable"><?php echo $city;?></li>
    </ul>
</div>  

或者使用相同的方法添加和删除内联编辑器。

EDIT

所以我在评论中说我改变了DOM和其他东西。给的课太差了，我想：）

HTML:

<div id="pesa"><p>PERSONAL INFORMATION</p>
    <div class="ul">
        <div>
            EMAIL:<div class="li editable">test</div>
            <input type="button" value="edit here" class="jim"><br>
        </div>
        <div>
            NAME:<div class="li editable">name</div>
            <input type="button" value="edit here" class="jim">
        </div>
        <div>
            TELLPHONE:<div class="li editable">000000000</div>
        </div>
        <div>
            COUNTRY:<div class="li editable">Tazmania</div>
        </div>
        <div>
            CITY:<div class="li editable">Fouilly les oies</div>
        </div>
    </div>
</div>  

$(document).ready(function(){

$(".editable").hover(
    function()
    {
        if(!$(this).hasClass("noPad")){
            $(this).addClass("editHover");
        }
    },
    function()
    {
        $(this).removeClass("editHover");
    }

);

$(".editable").bind("dblclick", function(){
    replaceHTML(this);
});

$(".jim").bind("click", function(){
    replaceHTML($(this).siblings(".li"));
});

$(".btnSave").live("click",
    function(){
        $(this).parent()
               .html($(this).parent().find("form input").val())
               .removeClass("noPad");
    });

$(".btnDiscard").live("click",
    function(){
        $(this).parent()
               .html( $(this).parent().find("form").data("oldText") )
               .removeClass("noPad");
    });

function replaceHTML(element){
    if( $(element).hasClass("noPad") ){
        return
    }
    var value = $(element).html().replace(/"/g, """);
    $(element).addClass("noPad")
           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + value + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>");

    $(element).removeClass("editHover");
    $(element).find("form").data("oldText", value);
}

}); 

个人信息

电子邮件：测试
姓名：姓名 电话：000000000 国家：塔兹马尼亚 城市：Fouilly les oies JS:

<div id="pesa"><p>PERSONAL INFORMATION</p>
    <div class="ul">
        <div>
            EMAIL:<div class="li editable">test</div>
            <input type="button" value="edit here" class="jim"><br>
        </div>
        <div>
            NAME:<div class="li editable">name</div>
            <input type="button" value="edit here" class="jim">
        </div>
        <div>
            TELLPHONE:<div class="li editable">000000000</div>
        </div>
        <div>
            COUNTRY:<div class="li editable">Tazmania</div>
        </div>
        <div>
            CITY:<div class="li editable">Fouilly les oies</div>
        </div>
    </div>
</div>  

$(document).ready(function(){

$(".editable").hover(
    function()
    {
        if(!$(this).hasClass("noPad")){
            $(this).addClass("editHover");
        }
    },
    function()
    {
        $(this).removeClass("editHover");
    }

);

$(".editable").bind("dblclick", function(){
    replaceHTML(this);
});

$(".jim").bind("click", function(){
    replaceHTML($(this).siblings(".li"));
});

$(".btnSave").live("click",
    function(){
        $(this).parent()
               .html($(this).parent().find("form input").val())
               .removeClass("noPad");
    });

$(".btnDiscard").live("click",
    function(){
        $(this).parent()
               .html( $(this).parent().find("form").data("oldText") )
               .removeClass("noPad");
    });

function replaceHTML(element){
    if( $(element).hasClass("noPad") ){
        return
    }
    var value = $(element).html().replace(/"/g, """);
    $(element).addClass("noPad")
           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + value + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>");

    $(element).removeClass("editHover");
    $(element).find("form").data("oldText", value);
}

}); 

$（文档）.ready（函数（）{
$（“.editable”）。悬停(
函数（）
{
if（！$（this.hasClass（“noPad”））{
$（this.addClass（“editHover”）；
}
},
函数（）
{
$（this.removeClass（“editHover”）；
}
);
$（“.editable”）.bind（“dblclick”，function（）{
替换HTML（本）；
});
$（“.jim”）.bind（“单击”，函数（）{
replaceHTML（$（this.sillis（.li））；
});
$（“.btnSave”）.live（“单击”，
函数（）{
$（this.parent（））
.html（$（this）.parent（）.find（“表单输入”）.val（））
.removeClass（“noPad”）；
});
$（“.btnDiscard”）.live（“单击”，
函数（）{
$（this.parent（））
.html（$（this.parent（）.find（“form”）.data（“oldText”））
.removeClass（“noPad”）；
});
函数替换HTML（元素）{
if（$（元素）.hasClass（“noPad”））{
返回
}
var value=$（element.html（）.replace（/“/g，”）；
$（元素）.addClass（“noPad”）
.html（“”）；
$（元素）.removeClass（“editHover”）；
$（元素）。查找（“表单”）。数据（“旧文本”，值）；
}
}); 

我希望这个新版本对你有好处

---

您可以找到新的JSFIDLE示例和以前的

，您的悬停选择器在哪里？您正在使用哪个js进行内联编辑，请查看。我已经用jst编辑了js和css位…请澄清。您提到要删除悬停选择器，但不清楚它在哪里？谢谢您的回答…但不是这样您看到的

必须单击才能生成表单并用oldtext值填充表单，但是我想要的是，单击按钮应该具有与单击按钮相同的效果，以指出JSFIDLE…真正有用的，但是…这不是我的目标…我已经在js FIDLE上升级了代码…但是我的担心的是..当我点击edit here（编辑此处）按钮时，它会选择所有列表项，并给它第一个列表项的html值…这就是问题所在…我只想选择ist项的值，即html，并生成一个带有列表项值的表单，以方便用户编辑..查看代码和演示，可以吗改变你的DOM？因为它是不兼容的：）（我知道我是个坏家伙）并且有一个更容易使用的结构。

$(document).ready(function(){

$(".editable").hover(
    function()
    {
        if(!$(this).hasClass("noPad")){
            $(this).addClass("editHover");
        }
    },
    function()
    {
        $(this).removeClass("editHover");
    }

);

$(".editable").bind("dblclick", function(){
    replaceHTML(this);
});

$(".jim").bind("click", function(){
    replaceHTML($(this).siblings(".li"));
});

$(".btnSave").live("click",
    function(){
        $(this).parent()
               .html($(this).parent().find("form input").val())
               .removeClass("noPad");
    });

$(".btnDiscard").live("click",
    function(){
        $(this).parent()
               .html( $(this).parent().find("form").data("oldText") )
               .removeClass("noPad");
    });

function replaceHTML(element){
    if( $(element).hasClass("noPad") ){
        return
    }
    var value = $(element).html().replace(/"/g, """);
    $(element).addClass("noPad")
           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + value + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>");

    $(element).removeClass("editHover");
    $(element).find("form").data("oldText", value);
}

});