jquery - jQuery インライン編集セレクター

Question

<input type="button" value="edit here">クライアント側に機能的なインライン編集スクリプトがありますが、誰かがボタンをクリックしたときのように、ホバーセレクターが機能するのと同じように値を選択してフォームを生成できるようにするボタンを追加したいと思います

要するに、ホバーステータスセレクターをクリックボタンセレクターに削除したいと思います。

詳細については、コードを確認してください。

<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>  

ありがとうございます。申し訳ありませんが、コード タグをここに配置するのに問題がありました。js です

$(document).ready(function() 
{
var oldText, newText;
$(".editable").hover(
    function()
    {
        $(this).addClass("editHover");
    }, 
    function()
    {
        $(this).removeClass("editHover");
    }
);

$(".editable").bind("dblclick", replaceHTML);


$(".btnSave").live("click", 
                function()
                {
                    newText = $(this).siblings("form")
                                     .children(".editBox")
                                     .val().replace(/"/g, """);

                    $(this).parent()
                           .html(newText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

$(".btnDiscard").live("click", 
                function()
                {
                    $(this).parent()
                           .html(oldText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

function replaceHTML()
                {
                    oldText = $(this).html()
                                     .replace(/"/g, """);
                    $(this).addClass("noPad")
                           .html("")
                           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                           .unbind('dblclick', replaceHTML);

                }
   }
 ); 

そしてCSS

     #pesa a{
color: #000;
     }

    #pesa a:hover{
color: #;
     }


    #pesa a:hover{
text-decoration: none;
    }

    h1{
font-size: 30px;
padding: 0;
margin: 0;
    }

    h2{
font-size: 20px;
    }


    .editHover{
background-color: #E8F3FF;
   }

     .editBox{
width: 326px;
min-height: 20px;
padding: 10px 15px;
background-color: #fff;
border: 2px solid #E8F3FF;
    }

    #pesa ul{
list-style: none;
    }

    #pesa li{
width: 330px;
min-height: 20px;
padding: 10px 15px;
margin: 5px;
    }

   li.noPad{
padding: 0;
width: 360px;
   }

   #pesa form{
width: 100%;
  }

.btnSave, .btnCancel{
padding: 6px 30px 6px 75px;
}

.block{
float: left;
margin: 20px 0;
}

Answer 1

function replaceHTML()
{
    $(this).removeClass('editHover'); 
}

またはtoggleClass()、インライン エディターの追加と削除に同じ方法を使用している場合に使用します。

Answer 2

編集

コメントで言うように、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>  

JS:

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

}); 

この新しいバージョンがあなたにとって良いものであることを願っています

新しい jsfiddle の例はこちらで、前の例はこちらで見つけることができます