Question

我正在使用JQuery插件Flapper使用单个输入元素显示多个名称，以创建分割翻页显示的效果，如在火车站等中使用。

我使用的代码 toggle 我猜它只允许两个选项。我需要能够显示至少3个名字，可能更多。

我是Javascript的新手并且一直在搜索，但无法想出这个。以下是我正在使用的代码。

HTML

<div class="display">
   <input class="header light S" id="header_display" />
</div>

的Javascript

var $header_display = $('#header_display');
           $header_display.flapper({
               width: 16
           });

           setTimeout(function(){
               $header_display.val('INITIAL NAME').change();

               var toggle = false;
           setInterval(function(){
                   if (toggle) {
                       $header_display.val('FIRST NAME').change();          
                   } else {
                       $header_display.val('SECOND NAME').change();          
                   }
                   toggle = !toggle;
               }, 8000);
           }, 700);

Answer 1

我设法回答了我自己的问题，我需要创建一个数组，然后逐个循环。来自setInterval with an Array的代码，特别是AlienWebguy的答案使我能够实现它。

html保持不变，但编辑的Javascript低于。

var $header_display = $('#header_display');
            $header_display.flapper({
                width: 16,
            });


            setTimeout(function(){
                $header_display.val('INITIAL NAME').change();

              var arr1 =['SECOND NAME', 'THIRD NAME', 'FOURTH NAME', 'INITIAL NAME'];
              var nameIndex = 0;
            setInterval(function(){
                $header_display.val(arr1[nameIndex++]).change();
                if (nameIndex == arr1.length)
                nameIndex = 0

              }, 8000);
            }, 900);

在循环序列中一个接一个地显示多个信息JQuery - Flapper

1 个答案: