bearbeiten Funktionalität für den Link - UI

Question

Ich habe ein Bild, auf Klick auf das Bild, leitet sie an einen bestimmten Link, sagen Sie „Google.com“ ab sofort

Der Code ab sofort wie folgt dar:

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

Jetzt wollte ich eine Bearbeitungsfunktionalität unter den Bildern. Wenn ich auf die Bearbeitungsschaltfläche oder das Symbol klicke, sollte ich die Möglichkeit haben, den href-Ort zu aktualisieren, an den die Seite gehen soll. Zum Beispiel: Wenn ich auf Bearbeiten klicke, sollte ich in der Lage sein, die href von Google.com zu yahoo.com zu ändern, wenn nötig ... Und wenn ich das nächste Mal auf das Bild klicke, sollte es mich zum aktualisierten Link führen .

Irgendwelche Lösungen oder Hilfe würde wirklich geschätzt werden?

Answer 1

bitte überprüfen Demo:

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

Answer 2

Um erwartete Ergebnis zu erzielen, verwenden Sie unter Option

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