Question

我正在尝试使用jQuery＆amp; AJAX用缩略图div的内容替换div的内容。现在我有一个精选部分，其h2，h3和p标签及其视频具有特定的样式。

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

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

我有点开始，但我似乎无法删除并添加类到特定的缩略图，而不实际更改下面的缩略图的CSS。

非常感谢任何帮助。

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

$(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选择器来定位任何嵌套的子级。（顺便说一句，数字索引的项目可以使用eq() method在jQuery中获取，不需要混淆你的标记。）

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

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

根据您的示例，目标应该是id。唯一的另一个考虑因素是确保你正在投掷的元素heirarchies匹配。

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

交换Div内容＆amp; CSS使用jQuery＆amp; AJAX

1 个答案: