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

你为什么克隆（）这个。 insted use

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

旋转木马的附加功能

2 个答案: