使用 Jquery 显示和隐藏函数
Show and Hide functions using Jquery
我是jquery的新手,这是我的代码:
<script type="text/javascript">
$(document).ready(function () {
$('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
$('.toAdd:eq(' + count + ')').show();
count++;
});
});
</script>
<div class="toAdd">One</div><div class="toAdd">Two</div><div class="toAdd">Three</div>
<input type="button" value="show" id="add"/>
<input type="button" value="hide" id="sub"/>
在此代码中,如果我单击显示按钮,则一个接一个地显示分区。 之后,如果我单击隐藏按钮,我需要一一隐藏
小提琴here
$(document).ready(function () {
$('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
$('.toAdd:eq(' + count + ')').show();
count++;
});
var deCount = count;
$('#sub').on('click', function () {
count--;
$('.toAdd:eq(' + count + ')').hide();
});
});
希望这会对您有所帮助... :)
$('#sub').on('click', function () {
if(count > 0){
count--;
$('.toAdd:eq(' + count + ')').hide();
}
});
由 Outlooker 编辑 jsfiddle
if($('.toAdd:eq(' + count + ')').is('*'))
添加了对项目是否存在的检查。
小提琴
也试试这个
<script type="text/javascript">
$(document).ready(function () {
$('.toAdd').hide();
$('#add').on('click', function () {
$('.toAdd,.hidden').first().show().addClass( "shown" ).removeClass( "hidden" );
});
$('#sub').on('click', function () {
$('.toAdd,.shown').last().hide().addClass( "hidden" ).removeClass( "shown" );
});
});
Outlooker的答案是正确的,但有一些错误。 when user will click on show button 4th time then your hide doesn't work as expected
.所以我只是在这里修复块并与你们分享。
网页代码:
<div class="toAdd">One</div>
<div class="toAdd">Two</div>
<div class="toAdd">Three</div>
<input type="button" value="show" id="add" />
<input type="button" value="hide" id="sub" />
Java 脚本代码:
/**
* Hide all Content div
*/
$(".toAdd").hide();
/**
* Total no of content div find out
**/
var lengthDiv = $(".toAdd").length;
/**
* Default count declare
**/
var count = 0;
/**
* Click on show button
**/
$('#add').on('click', function () {
if (count < lengthDiv) {
$('.toAdd:eq(' + count + ')').show();
count++;
}
});
/**
* Click on hide button
**/
$('#sub').on('click', function () {
if (count > 0) {
count--;
$('.toAdd:eq(' + count + ')').hide();
}
});
小提琴示例
试试这个,这会让你很好
$('.toAdd').hide();
$('#add').click(function(){
$('div').each(function(key, value) {
$(value).delay(key * 500).fadeIn(500);
});});
$('#sub').click(function(){
$('div').each(function(key, value) {
$(value).delay(key * 500).fadeOut(500);
});
});
小提琴Here
尝试
var $toAdds = $('.toAdd').hide();
var count = 0;
$('#add').on('click', function () {
if (count < $toAdds.length) {
$toAdds.eq(count).show();
count++;
}
});
$('#sub').on('click', function () {
if (count > 0) {
count--;
$toAdds.eq(count).hide();
}
});
演示:小提琴
相关文章:
- 从var向代码隐藏函数传递值
- javascript函数和代码隐藏函数的执行顺序
- 使用Javascript的多显示隐藏函数
- jQuery隐藏函数与“;按钮“;以及“;span”;但不是用“;a“;要素
- jQuery隐藏函数出现问题
- 带有隐藏函数的AngularJS自定义指令
- Jquery隐藏函数不起作用
- 如何在document.ready(function)时运行隐藏函数和动画
- 使用 JavaScript 访问隐藏函数
- 从 javascript 执行代码隐藏函数/子 (VB.NET)
- 使用 Jquery 显示和隐藏函数
- 使用 ajax 调用代码隐藏函数
- JavaScript 显示隐藏函数布局问题火狐浏览器
- 如何使用源映射从转译的代码中隐藏函数调用
- 如何使用 js 显示/隐藏函数内的标记
- 隐藏函数 other 中的复选框,并禁用所有元素以禁用复选框
- 从 JavaScript 调用代码隐藏函数,该函数可能会返回另一个 JavaScript 函数
- 如何使用java脚本函数中的参数调用代码隐藏函数
- 如何从asp.net代码隐藏函数中调用javascript函数
- 带有隐藏函数的JavaScript扩展类