replaceWith()；JQuery函数

Question

我正在尝试将本应是简单的JQuery代码片段包含到朋友的投资组合网站中，以替换：

<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>

通过以下方式：

<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>

当鼠标悬停在单独的div类上时：

<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>

我有这些独立的<div class="item">类，里面有图标。我希望能够将鼠标悬停在图标的类上，并用与<div class="item">图标对应的另一个类替换<div class="content">类。

对于JQ，我使用了以下内容：

<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>

我将每个内容类(除了.content类)都设置为display: none;，我想我需要在replaceWith();函数中抛出一个.show();事件，但是即使我删除了这些类上的display: none;，也没有什么可以用我试图替换的类来替换它自己。

作为一个整体，我仍然是JQuery和JavaScript的新手，所以这可能是我做得不对的一些愚蠢而简单的事情。如果我没有包含足够的信息来帮助您解决问题，请原谅。谢谢你的帮助！

Answer 1

试试这个：

$('.item.two').hover(function(){
    $('.content.one').replaceWith($('.content.two'));
});

Answer 2

在两种情况下，同一元素上都有两个类，因此您的选择器应该是：

.item.one
.item.two
.content.two
.content.two