创建一个干净的函数
Creating a clean function
我在下面有大量的JS块。我可以采取哪些步骤来清理它,因为它每次都会为不同的div 迭代相同的函数。我把它作为一个一般问题扔在那里,因为我不确定可以做些什么来简化这样的代码。
$(function() {
$('#1').hover(function() {
$('#1-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#1-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#2').hover(function() {
$('#2-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#2-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#3').hover(function() {
$('#3-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#3-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#4').hover(function() {
$('#4-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#4-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#5').hover(function() {
$('#5-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#5-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
$(function() {
$('#6').hover(function() {
$('#6-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#6-pin').find('.pin-bounce').removeClass('pin-hovered');
});
});
假设 .pin-bounce 是一个子级,您可以创建一个在公共类上运行的悬停函数,然后在该函数中查找该类。
$('.some-common-class-instead-of-id').hover(function() {
$(this).find('.pin-bounce').addClass('pin-hovered');
}, function() {
$(this).find('.pin-bounce').removeClass('pin-hovered');
});
如果它不是一个孩子,你可以做类似的事情,但不仅仅是找到孩子,你可以建立一个这样的字符串:
$('.some-common-class-instead-of-id').hover(function() {
var idToFind = $(this).attr('id') + '-pin';
$('#' + idToFind).find('.pin-bounce').addClass('pin-hovered');
}, function() {
var idToFind = $(this).attr('id') + '-pin';
$('#' + idToFind).find('.pin-bounce').removeClass('pin-hovered');
});
您可以使用 for 循环。
for (var i = 1; i <= 6; i++) {
(function(i){
$('#'+i).hover(function() {
$('#'+i+'-pin').find('.pin-bounce').addClass('pin-hovered');
}, function() {
$('#'+i+'-pin').find('.pin-bounce').removeClass('pin-hovered');
});
})(i);
}
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 我可以在json对象中添加一个函数吗
- Javascript使函数一个接一个地执行
- 是JavaScript中的函数一个对象
- 两个几乎相等的jQuery函数;一个适用于IE,一个不适用于IE
- 两个Javascript函数一个window.onload=Custom.init;和一个window.onload=f
- 使javascript加载函数一个接一个地执行
- 如何通过两个嵌套的匿名函数(一个带有超时的事件处理程序)传递变量
- 为什么我不能让两个jQuery函数一个在另一个里面呢?
- 给函数一个变量名,而不是它的值
- 如何使用嵌入函数(一个滚动页由Pete - peachananr)
- 是否有可能给JavaScript函数一个类型/类?
- 确保两个函数一个接一个地执行,其中第一个函数内部有一个异步调用
- 两个不同的ajax函数一个接一个调用返回相同的值
- jQuery第一次更改函数一个工作
- 给这个函数一个id
- 如何给回调函数一个值一个变量在特定时刻
- 使用回调使两个函数一个接一个地运行
- 两个函数(一个用php)是否可以用“;onclick”;
- 两个几乎相同的函数.一个函数用Queue进行排队.Jquery效果在queued函数上不起作用.为什么