1

我正在使用这个插件，Acmeticker。

它运作良好。现在我尝试使用按钮添加更多列表.add以Breaking News 9在ul. 但它没有按预期工作。如果我单击按钮添加，它会与另一个一起显示，li如果我单击多个按钮，它会显示重复Breaking News 9。

$('.my-news-ticker-3').AcmeTicker({         type:'typewriter',/*horizontal/horizontal/Marquee/type*/
            direction: 'right',/*up/down/left/right*/
            speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
            controls: {
                prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
            }
        });


$('.add').on('click', function()
{
  $(".my-news-ticker-3").append('<li><a href="#">Breaking News 9</a></li>');
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<h2>Typewriter</h2><div class="acme-news-ticker">
    <div class="acme-news-ticker-label">Horizontal News</div>

    <div class="acme-news-ticker-box">
        <ul class="my-news-ticker-3">
            <li><a href="#">Breaking News 1</a></li>
            <li><a href="#">Breaking News 2</a></li>
            <li><a href="#">Breaking News 3</a></li>
            <li><a href="#">Breaking News 4</a></li>
            <li><a href="#">Breaking News 5</a></li>
            <li><a href="#">Breaking News 6</a></li>
            <li><a href="#">Breaking News 7</a></li>
            <li><a href="#">Breaking News 8</a></li>
        </ul>

    </div>
    <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
        <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
        <span class="acme-news-ticker-pause"></span>
        <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
    </div>
    
<button class="add">Add</button>

4

1 回答 1

1

这个插件动态添加styleie :display: none; opacity: 0;到每个lis，所以当你追加新的时，lis你可以将它添加到你的li.Also 时，当你使用.append()它时不会追加lis，Breaking news 8因为位置lis正在发生变化，所以只在最后一个 li 之后追加新的 lis 你可以使用数据- attr 将帮助我们找到最后一个 li 并在此之后附加新的 li 。

演示代码：

$('.my-news-ticker-3').AcmeTicker({
  type: 'typewriter',
  direction: 'right',
  speed: 50,
  controls: {
    prev: $('.acme-news-ticker-prev'),
    toggle: $('.acme-news-ticker-pause'),
    next: $('.acme-news-ticker-next')
  }
});


$('.add').on('click', function() {
  var lengths = $(".my-news-ticker-3 li").length + 1 //get length of lis
  //get refrence of last lis
  var get_reference = $(".my-news-ticker-3 li[data-ids=" + $(".my-news-ticker-3 li").length + "]")
  //insert new lis 
  $(`<li style="display: none; opacity: 0;" data-text="Breaking News ${lengths}" data-ids='${lengths}'><a href="#">Breaking News ${lengths}</a></li>`).insertAfter($(get_reference))

});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<h2>Typewriter</h2>
<div class="acme-news-ticker">
  <div class="acme-news-ticker-label">Horizontal News</div>

  <div class="acme-news-ticker-box">
    <ul class="my-news-ticker-3">
      <!--added ids to keep track-->
      <li data-ids='1'><a href="#">Breaking News 1</a></li>
      <li data-ids='2'><a href="#">Breaking News 2</a></li>
      <li data-ids='3'><a href="#">Breaking News 3</a></li>
      <li data-ids='4'><a href="#">Breaking News 4</a></li>
      <li data-ids='5'><a href="#">Breaking News 5</a></li>
      <li data-ids='6'><a href="#">Breaking News 6</a></li>
      <li data-ids='7'><a href="#">Breaking News 7</a></li>
      <li data-ids='8'><a href="#">Breaking News 8</a></li>
    </ul>

  </div>
  <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
    <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
    <span class="acme-news-ticker-pause"></span>
    <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
  </div>

  <button class="add">Add</button>

于 2021-05-08T04:57:15.810 回答