jQuery-防止其他“;点击“;功能
jQuery - Prevent other "on-click" functions
我有一个简单的脚本,用户可以在其中加载两个不同的容器,其中包含一些不同的内容。
这是代码:
<div id="t-loader"></div>
<div class="media load-fixed active">
Load Fixed
</div>
<br />
<div class="media load-extra">
Load Extra
</div>
<br />
<div class="fixed-ads">
FIXED ADS IN HERE!!
</div>
<div style="display: none;" class="extra-ads">
EXTRA ADS IN HERE!!
</div>
以及jQuery:
$('.load-extra').click(function() {
$(this).addClass('active');
$('.load-fixed').removeClass('active');
$('.fixed-ads').hide();
$('#t-loader').show().html('loader');
setTimeout(
function()
{
$('#t-loader').hide();
$('.extra-ads').show();
}, 2000);
});
$('.load-fixed').click(function() {
$(this).addClass('active');
$('.load-extra').removeClass('active');
$('.extra-ads').hide();
$('#t-loader').show().html('loader');
setTimeout(
function()
{
$('#t-loader').hide();
$('.fixed-ads').show();
}, 2000);
});
问题是,每当有人单击.load-extra
和.load-fixed
时,两者都会显示在页面上。
我该怎么做,所以每当有人单击.load-extra
或.load-fixed
时,都只会显示其中一个
我在这里创建了一个jsFiddle:http://jsfiddle.net/j21oofwx/
在这个例子中,试着快速点击"加载额外"answers"加载固定",你会看到两个容器中的内容都会显示出来。
使用现有代码最简单的方法可能是保存setTimeout并在每次单击按钮时清除它-http://jsfiddle.net/uegt5opm/
var setTimer = null;
$('.load-extra').click(function() {
$(this).addClass('active');
$('.load-fixed').removeClass('active');
$('.fixed-ads').hide();
$('#t-loader').show().html('loader');
clearTimeout(setTimer);
setTimer = setTimeout(function(){
$('#t-loader').hide();
$('.extra-ads').show();
}, 2000);
});
$('.load-fixed').click(function() {
$(this).addClass('active');
$('.load-extra').removeClass('active');
$('.extra-ads').hide();
$('#t-loader').show().html('loader');
clearTimeout(setTimer);
setTimer = setTimeout(function(){
$('#t-loader').hide();
$('.fixed-ads').show();
}, 2000);
});
不过,在"真实"设置中使用setTimeout来实现此UI目的是不寻常的,所以如果这没有转移到您的实际用例中,我也不会感到惊讶。
相关文章:
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作
- 第二次点击具有不同功能的按钮并更改文本
- 两个按钮在初次点击后会触发相同的功能
- jQuery点击操作被排序功能剥离
- 如何使用相同的按钮点击两个功能
- 当我用鼠标左键点击时,让这个功能工作起来
- jQuery点击功能在获取请求后不起作用
- 创建缩放功能当我们点击签署整个页面获得缩放,当我们点击-签署它获得缩小
- Bootbox:取消对话框后的回调功能/点击'X'按钮
- 功能点击使打开新链接,不转到原始链接
- 你能在javascript中命名一个功能点击吗?
- 功能点击不起作用...不显示警告框
- Javascript:点击按钮即可获得更多功能.点击计数器
- 功能点击不为我的adminLTE工作
- JQuery按钮启用和禁用CSS功能点击
- 防止无功能点击
- 使用返回/停止功能点击
- 类似Twitter的功能:点击显示隐藏文本
- 为什么当我使用我写的几个功能点击按钮时,我的网站上显示的图像没有消失
- 触发功能点击绞刑游戏