分离图像，然后将其附加到分离的位置

Posted 2023-02-16

【中文标题】分离图像，然后将其附加到分离的位置

【英文标题】：Detaching an image then appending it back to where it was detached from

【发布时间】：2012-10-23 21:17:41

【问题描述】：

我的经验水平 - 我正在制作一个自定义滑块，这是我第一次使用 jQuery，但我认为我对 html、css 和 jquery 一起做什么有很好的了解，但是我的菜鸟仍然在继续。

我的问题 - 我标记了 17 个 div，我想删除 img 标签：

      <div class="slide" id="zero">
        <h2>April 1, 2011</h2>
        <img src="img/1_april12011.png"/><p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="one">
        <h2>April 2011</h2>
        <img src="img/2_april2011.png"/> <p>Lorem Ipsum</p>
      </div>
      <div class="slide" id="two">
        <h2>August 2011</h2>
        <img src="img/3_aug2011.png"/><p>Lorem Ipsum</p>
      </div>

我可以通过使用 .detach() 和以下 jQuery 轻松做到这一点：

 $('.slide').delegate('click', function() 
      if(imageToAttach == null)
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log
      else
        $(imageToAttach).appendTo(attachLocation);
        console.log('trying to append ' + imageToAttach + ' to ' + attachLocation);
        attachLocation = $(this).find('id');
        imageToAttach = $(this).find('img').detach();
        console.log('detached ' + imageToAttach);
      );

我正在使用 var = imageToAttach 和 attachLocation 来跟踪删除了哪些图像以及删除了它的位置，因此我可以在需要时再次将其附加到该特定 div （单击另一个图像或向左和右键单击）所以如果我能得到这个 -- http://jsfiddle.net/lorenzo_vm/nbF8d/3/ -- jsfiddle 工作，那么我相信我可以做我想做的事。

几个小时后的研究和摆弄

我想我想知道我想做的事，我将使用 .hide() 和 .show()，但我仍然很好奇上面提到的发生了什么小提琴...也就是说，当我单击另一个 div 时，如何让 img 重新插入到它们所在的 div 中...如果您，善良的 *** 用户，不介意，您能否告知我有一种更简单的方法来将 div 分配给某种数组，而不是使用 id="zero" id="one" 等。

像这样？

var slides = $('.slide');
var numberOfSlides = slides.length;
var slideArray[] = null; 

我是否只需使用 for 循环将 slides.length 的索引分配给数组中的每个点？

for( var i=0;i<=numberOfSlides;i++)
   slideArray[i] = ?;

或者 var 幻灯片是一个数组？我有点困惑。

非常感谢！

迈克尔

【参考方案1】：

这里。我更新了你的小提琴来做我认为你正在寻找的东西 - 主要是。不过不太确定，因为这种行为对我来说很奇怪，而且我不知道为什么要这样做......

http://jsfiddle.net/nbF8d/12/

这里是相关代码，可以浓缩成这样：

$(document).ready(function()
    var imageToAttach;
    var attachLocation;

    $('.slide').on('click', function() 
      if(imageToAttach != null)
        $(imageToAttach).appendTo(attachLocation);
      

      attachLocation = $(this);
      imageToAttach = $(this).find('img').detach();
   );
);
​

本质上，当您应该只存储对单击的元素的引用时，您试图找到一个元素“id”。

attachLocation = $(this);

这样 appendTo 有一个元素，而不仅仅是一个 id 的值（假设您使用 $(this).attr('id') 获取了实际的 id）

您的示例也没有声明变量或将侦听器置于就绪调用中。

另外请注意，我切换到 .on 而不是 .delegate - 请参阅：“从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。”

【讨论】：

用我更新的新链接重试。我正在使用我碰巧在的 lorem ipsum 网站上的一些随机图像。我将它们更改为使用我自己的图像，以防有一些推荐阻止阻止您查看图像。例如，Firefox 没有显示远程图像。现在可以了。

谢谢！非常感谢您的帮助:)