點擊任何圖像打開彈出並更改圖像url像

Question

其實我需要替換圖像的網址，當我點擊圖像，然後打開一個彈出窗口與輸入字段，我把網址，並保存它，但使用此方法。

喜歡這個：http://jsfiddle.net/eDMmy/9/

//Set up the dialog box 
 
$("#myDialog").dialog({ 
 
    autoOpen : false, 
 
    modal  : true, 
 
    title  : "A Dialog Box", 
 
    buttons : { 
 
       'OK' : function() { 
 
        var textValue = $('#myTextBox').val(); 
 
        var image1 = document.getElementById("image1"); 
 
        image1.src=textValue; 
 
        
 
       }, 
 
       'Close' : function() { 
 
        alert('The Close button was clicked'); 
 
        $(this).dialog('close'); 
 
       } 
 
       } 
 
});

.img { 
 
    height:200px; 
 
    width:200px; 
 
}

<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl()" id="image1"> 
 
    
 
<div id="myDialog"> 
 
    change url 
 
    <input type="text" id="myTextBox" /> 
 
</div> 
 
    <script> 
 
     function ChangeUrl(){ 
 
    $("#myDialog").dialog("open"); 
 

 
    var image1 = document.getElementById("image1"); 
 
      $("#myTextBox").val(image1.src); 
 
    image1.src= url; 
 
     }</script>

Answer 1

要設置的，而不是從中讀取文本字段，這樣做，而不是：

var image1 = document.getElementById("image1"); 
var url = $("#myTextBox").val(); 
image1.src= url; 

Answer 2

你只需要的是目標你點擊的圖像。 .data()在這種情況下能夠傳遞參數很重要。檢查此解決方案。

http://jsfiddle.net/eDMmy/687/

//Set up the dialog box 
 
$("#myDialog").dialog({ 
 
    autoOpen: false, 
 
    modal: true, 
 
    title: "A Dialog Box", 
 
    buttons: { 
 
    'OK': function() { 
 
     var img_to_update = $(this).data('link'); 
 
     var textValue = $('#myTextBox').val(); 
 
     document.getElementById(img_to_update).src = textValue; 
 
    }, 
 
    'Close': function() { 
 
     //alert('The Close button was clicked'); 
 
     $(this).dialog('close'); 
 
    } 
 
    } 
 
});

.img { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 

 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" /> 
 
<img class='img' src="http://media1.santabanta.com/full5/Nature/Animals/animals-89a.jpg" onclick="ChangeUrl(this.id)" id="image1"> 
 
<img class='img' src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" onclick="ChangeUrl(this.id)" id="image2"> 
 
<img class='img' src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onclick="ChangeUrl(this.id)" id="image3"> 
 

 
<div id="myDialog"> 
 
    change url 
 
    <input type="text" id="myTextBox" /> 
 
</div> 
 
<script> 
 
    function ChangeUrl(x) { 
 
    //$("#myDialog").dialog("open"); 
 
    $("#myDialog") 
 
     .data('link', x) 
 
     .dialog('open'); 
 
    var url = document.getElementById(x).src; 
 
    $('#myTextBox').val(url); 
 
    } 
 
</script>