为什么用 append() 复制图像？

Question

单击“项目”时，我希望将多个图像附加到容器元素。
项目及其图像 URL 在 JavaScript 对象中定义。

如果我单击一个项目，它的图像会正确附加。但是，如果我关闭项目查看器并再次单击该项目，图像都会被复制。我认为这与append() 有关。

我做错了什么？

我在下面做了一个演示：

$(function() {

  var projects = {

    'project_1': {
      'title': 'EduTravel For Credit',
      'description': 'Innovative travel for credit.',
      'images': [
        'http://lorempixel.com/400/30/abstract/1/',
        'http://lorempixel.com/400/30/abstract/2/'
      ]
    }

  }

  var projectData = projects["project_1"];

  jQuery('button').on('click', function() {

    $.each(projectData.images, function(item) {
      $('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
    });

    $('#project_images').html('');

  });

});

.image_holder {
  display: block;
  height: 30px;
  background-size: cover;
  margin: 0 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>CLICK ME</button>

<div id="project-images"></div>

View the live website

Answer 1

从您网站上的源代码来看，您似乎试图在添加新图像之前从容器中删除图像：

$('#project_images').html('');

但是，该选择器使用下划线，而实际元素使用连字符：

<div id="project-images">

此外，您正在清除内容在附加图像之后而不是之前。
我建议在添加新图像之前在容器上使用 jQuery 的 empty()：

$(function() {

  var projects = {

    'project_1': {
      'images': [
        'http://lorempixel.com/400/30/abstract/1/',
        'http://lorempixel.com/400/30/abstract/2/'
      ]
    },
    'project_2': {
      'images': [
        'http://lorempixel.com/400/30/abstract/3/',
        'http://lorempixel.com/400/30/abstract/4/'
      ]
    },
    'project_3': {
      'images': [
        'http://lorempixel.com/400/30/abstract/5/',
        'http://lorempixel.com/400/30/abstract/6/'
      ]
    }

  }

  var projectData = projects["project_1"];

  jQuery('button').on('click', function() {
    
    var id=jQuery(this).data('id'),
        projectData=projects["project_"+id];

    $('#project-images').empty();
    
    $.each(projectData.images, function(item) {
      $('#project-images').append('<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>')
    });

  });

});

.image_holder {
  display: block;
  height: 30px;
  background-size: cover;
  margin: 0 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>

<div id="project-images"></div>

另一种方法是连接一串新图像，然后不使用append()设置容器的HTML：

$(function() {

  var projects = {

    'project_1': {
      'images': [
        'http://lorempixel.com/400/30/abstract/1/',
        'http://lorempixel.com/400/30/abstract/2/'
      ]
    },
    'project_2': {
      'images': [
        'http://lorempixel.com/400/30/abstract/3/',
        'http://lorempixel.com/400/30/abstract/4/'
      ]
    },
    'project_3': {
      'images': [
        'http://lorempixel.com/400/30/abstract/5/',
        'http://lorempixel.com/400/30/abstract/6/'
      ]
    }

  }

  var projectData = projects["project_1"];

  jQuery('button').on('click', function() {
    
    var id=jQuery(this).data('id'),
        projectData=projects["project_"+id],
        html_string='';
    
    $.each(projectData.images, function(item) {
      html_string+='<span class="image_holder" style="background-image:url(' + projectData.images[item] + ');"></span>';
    });
    
    $('#project-images').html(html_string);

  });

});

.image_holder {
  display: block;
  height: 30px;
  background-size: cover;
  margin: 0 0 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-id="1">LOAD #1</button>
<button data-id="2">LOAD #2</button>
<button data-id="3">LOAD #3</button>

<div id="project-images"></div>