Question

自上周以来，我正在开展一个项目，我得到了一个部分，我应该为用户提供可编辑的内容来编辑一些信息。

这就是我想要改进的地方。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

请让我知道如何制作这两件事。提前致谢

Answer 1

CSS功能contenteditable可以轻松解决您的问题，因为您不擅长javascript。

您可以在此处获取更多详细信息：contenteditable article

希望，这是有帮助的。

Answer 2

如果你在上一个回答之后仍然很好奇，我会把你的代码弄乱一下。我使用jquery，因为这是我习惯的，但你当然不必。我也稍微改变了你的html，所以请注意这一点。

这就是我提出的：

 
 
   $(function() {
    $(".edit").click(function() {
			var input = $(this).parent().html();
  			var preEntry = input.substring(0, input.indexOf("</span> ") + 8)
  			var entry = input.substring(input.indexOf("</span> ") + 8, input.indexOf("<img"));
  			var postEntry = input.substring(input.indexOf("<img"));

        var title = $(this).parent().attr('id');

  			$(this).parent().html(preEntry + '<input name="'+ title + '" type="text" value="'+ entry +'">' + postEntry);

        $("#" + title + "-check").attr("style", "display : block;");
		});
});

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

单击图标后编辑信息

2 个答案: