4

我正在尝试使用 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');
     });
 });

谢谢！

4

1 回答 1

1

一般来说，你有比你需要的更多的代码来做你想做的事。想得简单，记住子节点从其父节点继承特异性。

你有这个：

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

如上所述，您不能有重复的 ids。但即使你可以，嵌套id="one"也是完全多余的。您将使用#one .video-container-promo. 同样，您可以通过以#one. （顺便说一句，数字索引的项目可以在 jQuery 中使用eq() method来访问，不需要弄乱你的标记。）

一旦你清理了你的 html，你的 jQuery 代码基本上可以变成一个单行代码。要将一个 div 的内容替换为单击的 div 的内容，只需执行以下操作：

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

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

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

于 2012-12-02T14:52:48.163 回答