javascript - 单击任何图像打开弹出窗口并更改图像 url

标签 javascript jquery html css

实际上,我需要在单击图像时替换图像 url,然后打开一个带有输入字段的弹出窗口,然后输入 url 并保存它,但使用的是这种方法。

像这样: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>

最佳答案

您正在设置文本字段而不是从中读取,改为这样做:

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

关于javascript - 单击任何图像打开弹出窗口并更改图像 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44637716/

相关文章:

javascript - Vue.JS 中的嵌套组件渲染和绑定(bind)

javascript - 代码无法使用数字数组创建 BST

javascript - 定义构造函数的不同方式

html - 从 CSS 中删除移动/平板电脑响应?

javascript - 在一页上一次显示所有 "title"工具提示

javascript - 在所有网页上和刷新后使用 javascript 保持更改

javascript - 测试方法过度指定

javascript - Ext JS 使分页工具栏变小

javascript - JS 检查 Jquery inArray

javascript - 如何在播放下一个音轨时停止此特定音频播放器(HTML5 + JavaScript)