Question

实际上我需要替换图片网址，当我点击图片然后打开一个带输入字段的弹出窗口，然后我把网页保存并保存但是使用这种方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

单击任何图像打开弹出窗口并更改图像URL

2 个答案: