Question

有人可以帮我解释一下这行脚本的结构吗？此处的另一位用户将其编写为我知道要编辑并更改为在我网站上其他位置使用的功能的一部分。

    $('#main_content .img-wrapper').empty().append($(this).find('img').clone());

这个从一个div获取图像并使用class =“img-wrapper”将其复制到另一个div

我想用文字做同样的事情。我试过这个

$('#main_content .text-wrapper').empty().append($(this).find('.info').clone());

其中（'。info'）是我要复制的div的类名。它不起作用。

我不完全理解语法，因为这是我第一天使用javascript。请有人解释我哪里出错了？

这是HTML - 有四种不同的图像，当用户点击每个图像时，我希望它在主要内容div中加载相同的图像和相关文本

    <div class="row">
<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images1.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#cc99cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images2.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#9966cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images3.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#6666cc;"></div>
  </div>
</div>

<div class="card-container">
  <div class="card">
    <div class="back">
      <img src="images4.png" />
      <div class="info" style="display: none;">This is a test for image one</div>
    </div>
    <div class="front"  style="background-color:#3366cc;"></div>
  </div>
</div>

这是主要内容div

<div id="main_content">
  <!-- main content -->
  <div class="img-wrapper">
  </div>
  <div class="text-wrapper">
  </div>
</div>

Answer 1

有问题的javascript使用jQuery。

$('#main_content .img-wrapper')

在id为'main_content'的元素中返回带有'img-wrapper'类的元素

.empty()

清空此元素（删除所有HTML内容）

.append(

将参数（下一个位）插入此元素

     $(this).find('img')

在this引用的元素中查找所有'img'标记（即，如果这是从.click()处理程序触发的，那么点击的元素就是

     .clone()

克隆这些元素，以便有两个版本 - 一个位于原始位置，另一个插入#main_content img-wrapper元素。

);

你肯定有一个#main_content .text-wrapper元素吗？

Answer 2

如果没有看到html结构，我的猜测就是您尝试查找.info的上下文不正确。

我假设这个代码块在一个事件处理程序中，如点击或鼠标悬停或其他东西。在这种情况下，$(this)指的是触发该事件的元素。所以下面的片段：

$(this).find('.info')

正在info引用的元素中查找类别为$(this) 的元素。

确保上下文正确无误 - 将$(this)更改为您需要在其中搜索的元素。

Answer 3

试试这个：

$('#main_content .text-wrapper').empty().append($(this).find('.info').html());

需要解释jQuery代码

3 个答案: