轮播的附加功能

Question

我正在尝试向轮播添加附加功能。轮播的默认行为是左右滚动，这很好。

我真正想通过这个轮播实现的是，当用户单击列表中的项目时，在轮播正上方的 div 中显示列表的内容。但使用我当前的代码，似乎所有列表项都被克隆并插入到内容类中。此外，一旦用户单击列表，它应该替换内容类中已存在的项目。

   <div class="content">
   </div>
   <div class="carousel">
        <ul>
            <li><a href="#"><img src="test1.jpg" alt="" /><em>Excepteur sing occaecat cupidatat</em></a></li>
            <li><a href="#"><img src="test2.jpg" alt="" /><em>Excepteur sing oc</em></a></li>
            <li><a href="#"><img src="test3.jpg" alt=""/><em>Excepteur sing oc</em></a></li>
            <li><a href="#"><img src="test4.jpg" alt="" /><em>Excepteur sing occaecat</em></a></li>
            <li><a href="#"><img src="test5.jpg" alt="" /><em>Excepteur sing</em></a></li>
        </ul>
    </div>



$(function() {
      $('.carousel ul li').click(function() {
        $(this).addClass('current').siblings().removeClass('current');
        $('current li').clone().appendTo('.content');

    });
});

Answer 1

上面的答案似乎是正确的，但如果您想操作附加到类内容的元素，那么您可以将 .text() 更改为 .html() ，如下所示。

$(this).addClass('current').siblings().removeClass('current');
$('.content').empty();
$('.content').append($('.current').html()) ;

Answer 2

你为什么要克隆（）这个。安装使用

$(this).addClass('current').siblings().removeClass('current');
$('.content').empty();
$('.content').append($('.current').text()) ;