检查跨度并删除第一个孩子 [英] Check spans and remove the first-child

问题描述

基本上，当点击时，它会进入下一个隐藏范围。

标记：

 < div id =facts> 
< span>点击循环< / span> 
< span>事实1< / span> 
< span>事实2< / span> 
< span>事实3< / span> 
< span>事实4< / span> 
< / div> 
  

js：

点击（功能（）{
 / $（$文档）.ready（函数（）{
 var current = 1; 
 $（'＃facts span' /隐藏所有人
 $（'＃facts span'）。hide（）; 
 //取消隐藏当前人：
 $（'＃facts span：eq（'+（current ％（'＃facts span'）。length）+'）'）。show（）; 
 //增加变量
 console.log（current％4）; 
 current ++; 
}）; 
 
 //取消隐藏第一个加载
 $（'＃facts span：first-child'）。show（）; 
}） ; 
  

我现在要做的是在点击后删除第一个范围，因为用户不需要再次看到点击循环指令。 解决方案

为原始文件指定一个特定的ID一个和一个班的其他人。

 < span id ='removeme'>点击循环< / span> 
< span class ='cycleme'>事实1< / span> 
< span class ='cycleme'> fact 2< / span> 
< span class ='cycleme'>事实3< / span> 
< span class ='cycleme'>事实4< / span> 
  

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

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

在脚本中，将一个click事件绑定到原始事件上以简单地将其删除。

  $（document）.ready（function（）{
 //初始化
 var current = 1; 
 
 //绑定第一个onclick以删除它本身
 $（'＃removeme'）。click（function（）{
 $（this）.remove（）; 
 //显示第一个
 $（'＃facts span：first-child'）。show（）; 
}） ; 
 
 
 //通过类别
 $（'＃facts span.cycleme'）为其他人指定目标。click（function（）{
 //隐藏全部其中
 $（'＃facts span'）。hide（）; 
 //取消隐藏当前人物：
 $（'＃facts span：eq（'+（current％$（ '#facts span.cycleme'）。length）+'）'）。show（）; 
 //增加变量
 current ++; 
}）; 
}）; 
  

以下是实例

Basically, this advances to the next hidden span when clicked.

The markup:

<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>

The 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();
});​

What I'm trying to do now is remove the first span after it's been clicked, because it is not necessary for the user to see the 'click to cycle' instruction again.

解决方案

Assign a specific id to the original one and a class to the others.

<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>

Show the removeme and hide all the others via CSS

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

In the script, bind a click event to the original one to simply remove it. The subsequent ones get the same handler as they had before.

$(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++;
   });
});​

Here is the live example

这篇关于检查跨度并删除第一个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！