javascript - 检查跨度并删除第一个孩子

Question

基本上，单击时会前进到下一个隐藏跨度。

标记：

<div id="facts">
    <span>click to cycle</span>
    <span>fact 1</span>
    <span>fact 2</span>
    <span>fact 3</span>
    <span>fact 4</span>
</div>

js：

$(document).ready(function() {
    var current = 1;
          $('#facts span').click(function() {
              // Hide all of them
              $('#facts span').hide();
              // Unhide the current one:
              $('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
              // Increment the variable
              console.log(current % 4);
              current++;
          });

    // Unhide the first one on load
    $('#facts span:first-child').show();
});​

我现在要做的是在点击后删除第一个跨度，因为用户没有必要再次看到“点击循环”指令。

Answer 1

将特定的 id 分配给原始的，并为其他的分配一个类。

<span id='removeme'>click to cycle</span>
<span class='cycleme'>fact 1</span>
<span class='cycleme'>fact 2</span>
<span class='cycleme'>fact 3</span>
<span class='cycleme'>fact 4</span>

removeme通过 CSS显示和隐藏所有其他

#removeme {
  display: inline;
}
span.cycleme {
  display: none;
}

在脚本中，将单击事件绑定到原始事件以简单地删除它。后续的处理程序与之前的处理程序相同。

$(document).ready(function() {
    // Initialize
    var current = 1;

   // Bind the first one's onclick to remove itself
   $('#removeme').click(function() {
      $(this).remove();
      // And display the first one
      $('#facts span:first-child').show();
   });


   // Target the others via their class
   $('#facts span.cycleme').click(function() {
      // Hide all of them
      $('#facts span').hide();
      // Unhide the current one:
      $('#facts span:eq(' + (current % $('#facts span.cycleme').length) + ')').show();
      // Increment the variable
      current++;
   });
});​

这是现场示例

Answer 2

干得好

小提琴

HTML

<div id="facts">
    <span id='remove'>click to cycle</span>
    <span>fact 1</span>
    <span>fact 2</span>
    <span>fact 3</span> 
   <span>fact 4</span>
</div> 

jQuery

$(document).ready(function() {
    var current = 1;
          $('#facts span').click(function() {
              $('#remove').remove();
              // Hide all of them
              $('#facts span').hide();
              // Unhide the current one:
              $('#facts span:eq(' + (current % $('#facts span').length) + ')').show();// Increment the variable
              console.log(current % 4);
              current++;
          });

    // Unhide the first one on load
    $('#facts span:first-child').show();
});