Question

我正在尝试编写一个代码，用于在页面上选择和显示ticker bxslider的li元素。当您使用自动收报机bxslider时，图像将从屏幕的一侧返回到另一侧。我想要一个滑块的随机图像，我点击它在屏幕上显示。这里的股票代码是bxslider代码

<div class="row sliderticker">
       <ul id="bxsliderID" class="bxslider">
         <li class="class1"></li>
         <li class="class2"></li>
         <li class="class3"></li>
         <li class="class4"></li>
         <li class="class5"></li>
         <li class="class6"></li>
         <li class="class7"></li>
         <li class="class8"></li>
      </ul>
</div>
<div class="row changeable">
    <li class="changeableitem"></li>
</div>

我将图像作为背景图像放到每个类中。可更改的div是显示我单击的图像的字段。这里的脚本代码

<script type="text/javascript">
$('.bxslider').bxSlider({
  minSlides: 7,
  maxSlides: 8,
  slideWidth: 1200,
  slideMargin: 10,
  ticker: true,
  speed: 30000
});
</script>
<script type="text/javascript">
$(document).ready(function () {
   $( ".bxslider li" ).click(function() {
      var className = $(this).attr('class');
      $('li.changeableitem').addClass(className);
      $(this).siblings().removeClass(className);
   });
   $( "li.changeableitem" ).click(function() {
      $('li.changeableitem').hide();
   });
});
</script>

当我使用这些代码时，我可以显示我在可变div上单击的图像。但是，如果我点击了class3 li，它会显示它然后如果我点击class1项目我看不到它。所以如果我选择classX li，我就不能在xth项之前选择li项。我只能展示一次li图像。如果我第二次点击它，它不起作用。你可以帮帮我吗？非常感谢你。

Answer 1

我认为问题是由于

$(this).siblings().removeClass(className);

在你的第一个.click（）函数中

行。

选择并在页面

1 个答案: