jquery - 使用 jQuery 和 AJAX 交换 Div 内容和 CSS

Question

我正在尝试使用 jQuery 和 AJAX 将 div 的内容替换为缩略图 div 的内容。现在我有一个特色部分，它的 h2、h3 和 p 标签以及视频都有特定的样式。

就 h2、h3、p 标签和视频而言，缩略图具有相同的标记，但每个都有自己特定的 css 样式.

我想要做的是点击其中一个缩略图，它用缩略图的信息替换特色部分，然后将特色部分放在缩略图内。

我已经开始了，但我似乎无法在不实际更改下面缩略图的 css 的情况下删除类并将其添加到特定缩略图。

如有任何帮助，我们将不胜感激。

我已经用我目前的设置和到目前为止的设置创建了一个 jsfiddle。

http://jsfiddle.net/drewbietron/YstAQ/

$(document).ready(function(){
   $("#one.promo-item").click(function(e){
       e.preventDefault();
       var content = $(this).html();
       $('.video-container-featured').replaceWith('<div class="video-container-promo" id="one">' +content+ '</div>'),
       $('#one.video-container-promo').addClass('.video-container-featured');
     });
 });

谢谢!

Answer 1

通常，您拥有的代码比您需要的要多得多，无法完成您想做的事情。简单思考并记住子节点从其父节点继承特异性。

你有这个:

<div class="promo-item" id="one">
    <div class="video-container-promo" id="one"><iframe src="#"></iframe></div>
    <h2>title...</h2>
    [...]

如上所述，you can't have duplicate ids .但即使可以，嵌套的 id="one" 也是完全多余的。您可以使用 #one .video-container-promo 定位该元素。同样，您可以通过使用 #one 启动您的 css 选择器来定位任何嵌套子项。 (顺便说一句，可以在 jQuery 中使用 eq() method 访问数字索引项，无需弄乱您的标记。)

一旦您清理了您的 html，您的 jQuery 代码基本上就变成了一行代码。要用单击的 div 的内容替换一个 div 的内容，只需执行以下操作:

$('.source'​​​​​).click(function(){
    $('#target').children().replaceWith($(this).clone().children());
});

根据您的示例，目标可能应该是一个 id。唯一的其他考虑因素是确保您所使用的元素层次结构匹配。

这是一个简单的 jsfiddle，展示了它是如何工作的:http://jsfiddle.net/joemaller/qxUvp/