jQuery newsticker 添加新列表 onclick 无法正常工作

Question

我正在使用这个plugin，Acmeticker。

效果很好。现在我尝试使用按钮.add 添加更多列表以在ul 的最后添加Breaking News 9。但它没有按预期工作。如果我单击按钮添加，它将与另一个 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>

Answer 1

此插件将style 即:display: none; opacity: 0; 动态添加到每个lis，因此当您追加新的lis 时，您可以将其添加到您的li。此外，当您使用.append() 时，这不会追加lis 在Breaking news 8 之后，因为lis 的位置正在发生变化，因此仅在最后一个 li 之后附加新的 lis，您可以使用 data-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>