0

我有一个功能，可以将用户输入提供的图像放入 html 页面的正文中。当收到第二个输入时，我想用新的替换这张图片。我试图在下面的函数中做到这一点。

function show_image(src, alt) {
        var img = document.createElement("img");
        img.src = src;
        img.width = 400;
        img.height = 300;
        img.alt = alt;

        var counter;
        var mynodes= new Array();
        mynodes.push(img);
        counter+=1;

        if(counter==1){
            // This next line will just add it to the <body> tag
            document.body.appendChild(img);  
        }
        else if(counter!=1)
        {
            var newNode=mynodes[counter-1];
            var oldNode=mynodes[counter-2];
            document.body.replaceChild(newNode,oldNode);
        }
4

3 回答 3

1

该变量counter是一个局部变量。每次调用该方法时，计数器都会初始化为 0。

你的mynodes变量也一样。它总是在数组中只有一个节点。

所以你可能想在这里改变你的逻辑。你需要帮助重写这个函数吗？

于 2013-11-13T23:30:42.253 回答
0

你的代码很尴尬。据我所知，您可以简单地更改相同的 img 标签，而不是每次都更改整个节点。几乎没有功能的原因..

单击此处进行现场演示。

function changeImg(img, src, alt) {
  //I doubt you even need a function for this.
  img.src = src;
  img.alt = alt;
}

var img = document.createElement('img');
//you could just use a css class instead...
//that's probably better anyway...why does your js care how it looks? 
img.width = 400;
img.height = 300;
document.body.appendChild(img);

changeImg(img, 'http://static.jsbin.com/images/favicon.png', 'image');

var imgSrcInput = document.getElementById('imgSrc');
var imgAltInput = document.getElementById('imgAlt');
var button = document.getElementById('change');

button.addEventListener('click', function() {
  changeImg(img, imgSrcInput.value, imgAltInput.value);
});

我整理了一个面向对象的示例。这使您的逻辑非常可重用和友好。在此处查看实际代码（单击）。

window.onload = function() { //usage

  var someElement = document.getElementById('someIdHere');
  var anotherElement = document.getElementById('anotherIdHere');

  imageReplacer.setup({
    element: someElement,
    initSrc: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRg-icdkibfDt8VE7FkaKZyVUh8SBR4YTGd-2Jz1wZeUVacv4YD8zrvwclN',
    initAlt: 'Starting Image'
  });
  imageReplacer.setup({
    element: anotherIdHere,
    initSrc: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRrHWuOzgYPbsuSF9cYQo3ORkcdIC4-8xaszlCrI3f7arAC7vhV7HwMN_fG',
    initAlt: 'Starting Image'
  });

};


var imageReplacer = { //package up your app
  setup : function(options) {
    //create a new imageReplacer so that each one will operate independently. The "this" pointer will refer to each element's imageReplacer.
    options.element.imageReplacer = Object.create(imageReplacer);
    options.element.imageReplacer.makeReplacer(options);
  },
  makeReplacer : function(options) {
    options.element.className = 'imageReplacer';
    var markup = this.createMarkup();

    this.changeImage(options.initSrc, options.initAlt);

    this.addClick(this.button);

    options.element.appendChild(markup);
  },
  createMarkup : function() {
     var frag = document.createDocumentFragment();

    this.srcInput = document.createElement('input');
    this.srcInput.type = 'text';
    this.srcInput.placeholder = 'Image Source';

    this.altInput = document.createElement('input');
    this.altInput.type = 'text';
    this.altInput.placeholder = 'Image Alt';

    this.button = document.createElement('button');
    this.button.textContent = 'Change Image';

    this.imgTag = document.createElement('img');

    frag.appendChild(this.srcInput);
    frag.appendChild(this.altInput);
    frag.appendChild(this.button);
    frag.appendChild(this.imgTag);

    return frag;
  },
  addClick : function(button) {
    var that = this;
    button.addEventListener('click', function() {
      that.changeImage(that.srcInput, that.altInput);
    });
  },
  changeImage : function(src, alt) {
    this.imgTag.src = src;
    this.imgTag.alt = alt;
  }
};
于 2013-11-13T23:45:24.103 回答
0

我没有创建一个动态更改图片的函数（确实有效），而是决定在我的 index.html 文件中隐藏一张图片。然后用 $("#my_image").attr("src","img/fire.gif"); 更改 src #my_image 是图像标签的 id。

于 2013-11-14T21:11:50.497 回答