为什么图像与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>