延迟和显示文本问题

JQuery - delay and show text issue

本文关键字：问题 文本 显示 延迟      更新时间：2023-09-26

下面我得到了一些代码，这应该延迟2秒，隐藏以前的跨度和显示下一个跨度，但我似乎不能让它工作。

  <style>
       span{ display:none}
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><script>
<div id="text"></div>
<script>
    var text = [
        "<span>Sent A blabla</span>",
        "<span>sent B</span><span>sent b bbb cont....</span>",
        "<span>Sent c...</span><span>Sent C2</span><span>sent c3</span>", ];
    var text = text[Math.floor(Math.random() * text.length)];
    jQuery('#text').html(text);
    jQuery('#text').show();
    jQuery('#text span:first').show();

  var delay = 2000;
  jQuery("#text span").each(function() {
      setTimeout( function(){ 
       var el = $(this);
        el.prev().hide();
        el.show();
      }, delay)
      delay += 2000;
  });
</script>

由于您使用关键字this而出现问题。

在for语句中，您需要设置一个变量，该变量设置为$(this)，然后在超时时引用该变量。在下面的例子:

  var parent = $(this);
  setTimeout( function(){ 
   var el = parent;
    el.prev().hide();
    el.show();
  }, delay)
  delay += 2000;

JS Fiddle: http://jsfiddle.net/Lykwmfz8/

都在代码注释中:

jQuery(function( $ ){ // FingerSaver: Use $ in the jQuery scope // It's also a DOM ready!
  var delay = 2000;       // You know this one :)
  var $text = $("#text"); // Cache your parent element
  // Elements Array.
  // You  have multiple SPANS per array key
  // (which is odd but OK... here's the array)
  var text = [
    "<span>Sent A blabla</span>",
    "<span>sent B</span><span>sent b bbb cont....</span>",
    "<span>Sent c...</span><span>Sent C2</span><span>sent c3</span>",
  ];
    // Append all SPANs to the #text parent:
    $text.html( text.join("") );
    // All SPANs are now inside #text but are hidden by CSS!
    // Get (cache) all appended SPANs
    var $spans = $text.find("span");
    // OK, how many SPANs we have?
    var tot = $spans.length;
    // (You had 3 array keys, but) 6 SPAN elements :)
    // Start c Counter with a random number
    var c = Math.floor(Math.random() * tot);
    // Create a function that will loop the texts
    (function loop() {
      c += 1;   // Increment counter
      c %= tot; // Reset counter back to 0 on reminder
      $spans.fadeOut(500).eq( c ).stop().fadeIn(500);
      setTimeout(loop, delay);
    }()); // Start!
});
#text span{
  position:absolute;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text"></div>

如果您希望保留多个SPAN元素的集合并显示为GROUPS，那么您所需要做的就是将来自数组键的每个SPAN包装到父包装器中，这与上面的操作相同，只是，不是操作SPAN，而是操作它们的父包装器。由于你在问题中没有很好地解释这一点，到目前为止，我只能给你以上的信息了。

相关文章：