アイコンをクリックして情報を編集する

Question

私は先週からプロジェクトに取り組んでおり、編集可能なコンテンツを提供して情報の一部を編集する予定です。

これは私が改善しようとしているものです。

.setting { 
 
    display: block; 
 
    font-weight: normal; 
 
    padding: 7px 3px; 
 
    border-top: 1px solid #d6d1af; 
 
    margin-bottom: 5px; 
 
} 
 
.setting span { 
 
    float: left; 
 
    width: 250px; 
 
    font-weight: bold; 
 
} 
 
.setting img { 
 
    cursor: pointer; 
 
    float: right; 
 
    width: 30px; 
 
    height: 30px; 
 
}

<section id="settings" class="hidden"> 
 
     <p>Edit your user settings:</p> 
 
     
 
     <p class="setting"><span>Name </span> Prince Lionel N'zi <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
     
 
     <p class="setting"><span>E-mail </span> lolno@gmail.com <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
     
 
     <p class="setting"><span>Mobile Number </span> +233267689067 <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
     
 
     <p class="setting"><span>Address </span> Weekly <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
     
 
     <p class="setting"><span>Company Name </span> None <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
\t \t 
 
     <p class="setting"><span>Telephone </span> +233267689067 <img src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
     </section>

私はこれら二つのことを行うことができますか教えてください。事前に感謝

Answer 1

CSSの機能contenteditableは、javascriptが良くないため、問題を簡単に解決できます。

あなたがここに詳細を取得することができます：contenteditable article

希望、それは助けています。

Answer 2

あなたが以前の回答の後でまだ不思議だった場合は、私はあなたのコードをちょっと混乱させました。私はjqueryを使いました。なぜならそれは私が慣れていたものですが、あなたは確かにそうする必要はありません。私もちょっとあなたのhtmlを変更したので、ちょうどそのことに注意してください。

 
    
 
    $(function() { 
 
    $(".edit").click(function() { 
 
\t \t \t var input = $(this).parent().html(); 
 
    \t \t \t var preEntry = input.substring(0, input.indexOf("</span> ") + 8) 
 
    \t \t \t var entry = input.substring(input.indexOf("</span> ") + 8, input.indexOf("<img")); 
 
    \t \t \t var postEntry = input.substring(input.indexOf("<img")); 
 

 
     var title = $(this).parent().attr('id'); 
 

 
    \t \t \t $(this).parent().html(preEntry + '<input name="'+ title + '" type="text" value="'+ entry +'">' + postEntry); 
 

 
     $("#" + title + "-check").attr("style", "display : block;"); 
 
\t \t }); 
 
});

setting { 
 
     display: block; 
 
     font-weight: normal; 
 
     padding: 7px 3px; 
 
     border-top: 1px solid #d6d1af; 
 
     margin-bottom: 5px; 
 
    } 
 
    .setting span { 
 
     float: left; 
 
     width: 250px; 
 
     font-weight: bold; 
 
    } 
 
    .setting img { 
 
     cursor: pointer; 
 
     float: right; 
 
     width: 30px; 
 
     height: 30px; 
 
    } 
 

 
    .check { 
 
    \t display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section id="settings" class="hidden"> 
 
      <p>Edit your user settings:</p> 
 
      
 
      <p id="name" class="setting"><span>Name </span> Prince Lionel N'zi <img class="edit" id="name-edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img class="check" id="name-check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
      
 
      <p id="email" class="setting"><span>E-mail </span> lolno@gmail.com <img id="email-edit" class="edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img id="email-check" class="check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
      
 
      <p id="mobile" class="setting"><span>Mobile Number </span> +233267689067 <img id="mobile-edit" class="edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img id="mobile-check" class="check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
      
 
      <p id="address" class="setting"><span>Address </span> Weekly <img id="address-edit" class="edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img id="address-check" class="check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
      
 
      <p id="comp-name" class="setting"><span>Company Name </span> None <img id="comp-name-edit" class="edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img id="comp-name-check" class="check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
    \t \t 
 
      <p id="tel" class="setting"><span>Telephone </span> +233267689067 <img id="tel-edit" class="edit" src="https://sharpsnippets.files.wordpress.com/2013/12/editsvg.png" alt="*Edit*"> <img id="tel-check" class="check" src="http://www.free-icons-download.net/images/successful-check-icon-73477.png" alt="*Edit*"></p> 
 
      </section>