Auf Bild klicken Sie auf Eingabe-Wert jquery

Question

Hallo ich versuche, ein Bild aus einem Eingabefeld und wenn ich ein anderes Bild die Box ändern seinen Wert und dann das erste Bild ändern seine src, aber ich weiß nicht, warum nicht funktioniert mein Skript ist

$(document).ready(function() { 
 
    $("#skin").change(function() { 
 
     var inputVal = $(this).val(); 
 
     $("#container").attr("src", inputVal); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#container2").click(function() { 
 
     var source = document.getElementById("container2").src; 
 
     $("#skin").val(source) 
 
    }); 
 
});

<input type="text" id="skin"> 
 
<img id="container" width="200px" height="200px" border-radius="50%"> 
 
<img id="container2" src="http://i.imgur.com/xt0IkTL.png"> 
 

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

Answer 1

Zu allererst Sie jQuery verwenden.

So müssen Sie nicht native Javascript Domänenauswahl verwenden.

Sekunde; Sie haben Ihre Dokumentbereitschaftsfunktion bereits definiert. Sie müssen das nicht noch einmal anrufen.

Umschließen Sie den Code zwischen der ersten Dokumentbereitschaftsfunktion.

Ich empfehle dringend, dass Sie Ihre Methode ändern auf etwas anderes wie das Drücken einer Taste oder Trigger mit etwas anderem ändern.

Nach all diesen Empfehlungen;

Hier ist, wie Sie dies tun können:

<input id="source-changer" type="text" placeholder="Image url huh?" /> 
<img id="container" width="200px" height="200px" border-radius="50%"><img id="container2" src="https://i.ytimg.com/vi/PjDtgj7qR94/maxresdefault.jpg" width="100"> 

<!-- sample address here: https://pp.vk.me/c622424/v622424967/39c6c/6poIwEXow7U.jpg --> 

<script> 
$(document).ready(function() { 
    var firstImage = $('#container'); 
    var secondImage = $('#container2'); 

    $('input#source-changer').blur(function(){ 
     var value = $(this).val(); 

     if(value !== "") { 
      firstImage.attr('src', value); 
     } 
    }); 

    secondImage.click(function(){ 
     firstImage.attr('src', $(this).attr('src')); 
    }); 
}); 
</script> 

Test hier:

https://jsfiddle.net/upLdgb8y/1/