如何使用jQuery在另一个元素的元素中显示图像答案

【问题标题】：How to display an image in an element from another element using jQuery如何使用jQuery在另一个元素的元素中显示图像
【发布时间】：2017-07-07 17:51:28
【问题描述】：

我想使用 jQuery 选择并显示图像。
我在tile_details div 上尝试click 并使用jQuery 在col-md-6 中显示tile__media 图像。

<div class="tile">
  <div class="tile__media">
    <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
  </div>
  <div class="tile__details">
    <div class="tile__title">
      Top Gear
    </div>
  </div>
</div>


<div class="container-fluid" style="display:none">
  <div class="row">
    <div class="col-md-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum
      dolor sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor
      sit amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor sit
      amet, consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Itaque eveniet reprehenderit, consequatur perferendis repellendus omnis libero laboriosam nostrum tenetur nulla dolores quos id delectus quo obcaecati eaque provident? Maxime, atque.
    </div>
    <div class="col-md-6">
      //Display Image
    </div>
  </div>
</div>

【问题讨论】：

人们投反对票，因为你没有表现出任何努力自己去做。添加一些您尝试过的代码，也许是相关的 css。
请发布有问题的代码，最好是在一个工作的 sn-p 中展示问题，这样我们就可以看到可能是什么原因。另请参阅How do I ask a good question，如果适用，请参阅How to create a Minimal, Complete, and Verifiable example
而且还因为您的说明不清楚，引导 html 是做什么用的？ //Display Image 评论是什么意思？

标签： javascript jquery html css

【解决方案1】：

如果我正确理解了这个问题，您想从 '.tile__media' div 中获取图像并将其设置为该 div 的内容。如果你给 div 一个标识符，这可以通过下面的 jQuery 来实现：

$(".tile__details").click(function(e) {
    $('#imageDiv').html($('.tile__media').html());
});

jsFiddle

更新：如果您希望它是动态的，基于您点击的图片，您可以将点击的图片克隆到 div 中。代码如下：

$(".tile__img").click(function(e) {
    $('#imageDiv').html($(this).clone());
});

jsFiddle

【讨论】：

实际上我正在创建滑块。如果我单击任何图像，它将在另一个 div 中显示底部。
好的。和谢谢。 :) 我正在尝试创建像 netflix 一样的幻灯片。如果你知道如何创建请帮助我。
已更新。可能值得查看 codepen.io/bork/pen/zBXwda 之类的示例，以获取有关创建 Netflix 式滑块的灵感。