[英]Check spans and remove the first-child
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: 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. 将特定ID分配给原始ID,将类分配给其他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>
Show the removeme
and hide all the others via CSS 显示
removeme
并通过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 you go 干得好
HTML 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 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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.