Question

我有一个功能，可以将用户输入提供的图像放入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);
        }

Answer 1

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

与您的mynodes变量相同。它总是在数组中只有一个节点。

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

Answer 2

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

Click here for a live demo.

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

我整理了一个面向对象的例子。这使您的逻辑非常可重用且友好。 Check out the code in action here (click).

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

Answer 3

我决定在index.html文件中隐藏一张图片，而不是创建动态更改图片的功能（确实有效）。然后用$（“＃my_image”）更改src。attr（“src”，“img / fire.gif”）; #my_image是图片标记的id。

用新图像替换旧图像。 JavaScript的

3 个答案: