链接的编辑功能 - UI答案

【问题标题】：Edit functionality for the link - UI链接的编辑功能 - UI
【发布时间】：2016-11-22 21:58:42
【问题描述】：

我有一张图片，点击图片后，它会指向一个特定的链接，现在说“Google.com”

目前的代码如下：

  <div class = "gallery">
        <ul>
           <li>
             <a target = "_blank " href="www.google.com"> <p>Google</p> <img src="images/1.jpg" alt ="" > </a>
           </li> 
        </ul>
  </div>

现在，我想在图像下方添加一个编辑功能。当我单击编辑按钮或符号时，它应该让我可以选择更新页面应该指向的 href 位置。例如：如果我点击编辑选项，如果需要，我应该能够将 href 从 Google.com 更改为 yahoo.com...当我下次点击图片时，它应该会引导我到更新的链接。

任何解决方案或帮助将不胜感激？

【问题讨论】：

标签： javascript php html css xampp

【解决方案1】：

请查看演示：

https://jsfiddle.net/077vc41d/1/

<input id="urlInput" type="text" value ="http://www.google.com"/>
<button id="editButton">Edit</button>
<div class = "gallery">
    <ul>
       <li>
         <a id="linkTag" target = "_blank " href="http://www.google.com"> <p>Google</p> <img src="https://0.s3.envato.com/files/148768949/Prev%20big.png" alt ="" > </a>
       </li> 
    </ul>
</div>

Javascript：

 document.getElementById("editButton").addEventListener("click",changeURL);
 function changeURL(e){
 var input = document.getElementById("urlInput");
 var link = document.getElementById("linkTag");
 linkTag.setAttribute("href",input.value);
}

【讨论】：

谢谢！这正是我想要的！
你再问一个问题：这很好用。但是，如果我不想看到文本框，只想看到编辑按钮...并且单击编辑按钮，会出现要求新 URL shud 的文本框？因为我会连续有多个图像并且有这么多可见的文本框可能看起来不太好..有什么建议吗？
这正是我问的！非常感谢！！干杯！
我有一个澄清要问：由于我们使用 JavaScript，我们可能会添加编辑功能.. 它工作正常.. 但是，如果我关闭网页然后再次打开，我们编辑的那个不会得救吧？它会回到原来的链接？

【解决方案2】：

要达到预期效果，请使用以下选项

HTML：

<div class="gallery">
  <ul>
    <li>
      <a target="_blank " id="new" href="http://www.google.com">
        <p>Google</p> <img src="http://www.w3schools.com/css/img_fjords.jpg" alt=""> </a>
    </li>
  </ul>
</div>
Change URL<input type="text" id="newURL">
<button onclick="update()">Change</button>

JS：

function update() {
  var x = document.getElementById("newURL").value;
  document.getElementById("new").href = x;
}

http://codepen.io/nagasai/pen/akqxWE

【讨论】：

这也很好用！感谢您的帮助！
感谢 topjay :) .. 如果我的帖子对您的问题有所帮助，请将其标记为已回答 :)