为啥用 append() 复制图像？

Posted 2023-03-11

【中文标题】为啥用 append() 复制图像？

【英文标题】：Why are images duplicated with append()?为什么用 append() 复制图像？

【发布时间】：2015-12-22 15:07:24

【问题描述】：

单击“项目”时，我希望将多个图像附加到容器元素。 项目及其图像 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

【问题讨论】：

按F12学习使用你看到的东西，调试网站很容易

您能否在问题中包含相关的 javascript/html？

分享您的 html/javascript 代码，您将获得帮助

您似乎希望在每次加载新项目时清除#project-images。我在您的代码中看到$('#project_images').html('');，但它有一个下划线而不是连字符。此外，它在您附加所有图像之后，而不是之前。

我试图澄清问题并添加了一个工作演示。如果您觉得我的修改不正确或不恰当，请随时回滚修改。

【参考方案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>

【讨论】：

$('#project-images').empty('');这行得通，谢谢。对于没有正确格式化我的问题，我深表歉意。我对这一切都很陌生，我真的不明白你提到的任何意思。我正在尝试在线学习 javascript 教程，以便有一天我可以更好地理解。不过谢谢！

没问题。随时提出更多问题。继续编码！