jquery 选择器和 setInterval

Question

$('#start').click(function() {
  setInterval(fade, 1000);

  function fade() {
    $('.visible:first-child').removeClass('visible').addClass('invisible');
  };
});

.invisible {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <span class='visible'>Lorem ipsum dolor sit amet,</span>
  <span class='visible'> consectetur adipiscing elit.</span>
  <span class='visible'> Integer nec odio.</span>
</p>
<button id="start">start</button>

我希望 <span> 标签按顺序淡出。

为此，我设置了以 1000 毫秒为间隔更改 class 个 <span> 标签的脚本。

但它只有效一次。

我认为这是因为 .visible:first-child 从未改变过。

https://jsfiddle.net/dewit/b9Lgdwaj/

Answer 1

尝试 first 而不是 first-child。

下面的工作片段。

$('#start').click(function(){
    setInterval(fade,1000);
    function fade(){
        $('.visible:first').removeClass('visible').addClass('invisible');
    };
});

.invisible {
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
    <span class='visible'>Lorem ipsum dolor sit amet,</span>
    <span class='visible'> consectetur adipiscing elit.</span>
    <span class='visible'> Integer nec odio.</span>
</p>

<button id="start">start</button>

Answer 2

":first-child" 总是表示节点的第一个 child，不包括选择器。因此，当您查询“.visible:first-child”时，如果第一个 child 不是“.visible”，您将不会得到任何结果。您需要更改查询以解决此问题。

Answer 3

first-child 选择器选择作为其父元素的第一个子元素的所有元素。这就是为什么你唯一的第一个元素是不可见的。您可以为此使用 $('.visible:first')。

jquery 选择器和 setInterval

jquery selector and setInterval

jquery

selector