我有两个事件处理程序。一个是单击处理程序,另一个是更改处理程序。除了事件选择器之外,唯一的区别是为 className 分配了不同的变量。
注意:这里没有显示完整的代码。
事件处理程序 1#:
$(document).on('change', '#selectContainer [id]', function () {
prevClass = className;
className = $("select").val(); <<<< DIFFERENT
var back = '<div id="back"><div id="_'+ prevClass +'"></div></div>';
link[prevClass] = original;
original = link[className];
link[className] += back;
$('.inter').fadeTo(250, 0.25, function () {
$('.inter').html(link[className]);
$('.inter').css({'background-image': 'url("' + className + '.png")'});
$('.inter').fadeTo(250, 1.00);
});
});
事件处理程序 2#:
$(document).on('click', '.inter [class], .inter #back [id]', function () {
prevClass = className;
className = (this.id || this.className).substr(1); <<<< DIFFERENT
var back = '<div id="back"><div id="_'+ prevClass +'"></div></div>';
link[prevClass] = original;
original = link[className];
link[className] += back;
$('.inter').fadeTo(250, 0.25, function () {
$('.inter').html(link[className]);
$('.inter').css({'background-image': 'url("' + className + '.png")'});
$('.inter').fadeTo(250, 1.00);
});
});
整个代码:
/* Preload images function for speed*/
function preload(arrayOfImages) {
$('body').addClass("loading");
$(arrayOfImages).each(function () {
$('<img/>')[0].src = this;
});
$('body').removeClass("loading");
}
function transformImage(className, original, link, prevClass) {
var back = '<div id="back"><div id="_' + prevClass + '"></div></div>';
link[prevClass] = original;
original = link[className];
link[className] += back;
$('.inter').fadeTo(250, 0.25, function () {
$('.inter').html(link[className]);
$('.inter').css({
'background-image': 'url("' + className + '.png")'
});
$('.inter').fadeTo(250, 1.00);
});
}
$(document).ready(function () {
/* Images to preload*/
var preloadi = [
'/WCMSWR/_assets/images/1.png',
'/WCMSWR/_assets/images/2.png',
'/WCMSWR/_assets/images/3.png',
'/WCMSWR/_assets/images/4.png',
'/WCMSWR/_assets/images/5.png',
'/WCMSWR/_assets/images/6.png',
'/WCMSWR/_assets/images/7.png',
'/WCMSWR/_assets/images/8.png',
'/WCMSWR/_assets/images/9.png',
'/WCMSWR/_assets/images/10.png'];
var prevClass = '0';
var className = '0';
var original = 'yresadfasxdsa';
var link = ['<div class="_0"></div><div class="_22"></div><div class="_22t"><p>This is a tooltip. This is the first step for the jquery path system</p><div class="tooltiptail"></div></div>', // 0
'<div class="_0"></div><div class="_3"></div><div class="_4"></div>', // 1
'<div class="_0"></div><div id="selectContainer"><select id="select" name="select1"><option>Select option</option><option value="21">21</option><option value="22">22</option><option value="23">23</option></select></div>', // 2
'<div class="_0"></div><div class="_5"></div><div class="_6"></div>', // 3
'<div class="_0"></div><div class="_7"></div><div class="_8"></div>', // 4
'<div class="_0"></div><div class="_23"></div><div class="_10"></div>', // 5
'<div class="_0"></div><div class="_7"></div><div class="_11"></div>', // 6
'<div class="_0"></div><div class="_24"></div><div class="_9"></div>', // 7
'<div class="_0"></div><div class="_23"></div><div class="_10"></div>', // 8
'<div class="_0"></div><div class="_25"></div>', // 9
'<div class="_0"></div><div class="_12"></div><div class="_13"></div>', // 10
'<div class="_0"></div><div class="_25"></div>', // 11
'<div class="_0"></div><div class="_2"></div><div class="_13"></div>', // 12
'<div class="_0"></div><div class="_14"></div><div class="_15"></div>', // 13
'<div class="_0"></div>', // 14
'<div class="_0"></div><div class="_16"></div><div class="_17"></div>', // 15
'<div class="_0"></div>', // 16
'<div class="_0"></div><div class="_18"></div><div class="_19"></div>', // 17
'<div class="_0"></div>', // 18
'<div class="_0"></div><div class="_20"></div><div class="_21"></div>', // 19
'<div class="_0"></div>', // 20
'<div class="_0"></div>', // 21
'<div class="_0"></div><div class="_1"></div><div class="_1t"><p>This is a tooltip. This is the first step for the jquery path system</p><div class="tooltiptail"></div></div><div class="_2"></div>', // 22
'<div class="_0"></div>', // 23
'<div class="_0"></div><div class="_7"></div><div class="_11"></div>', // 24
'<div class="_0"></div><div class="_12"></div><div class="_13"></div>' // 25
];
/* If you wish to insert tooltips use the below template code
<div class="_22t"><p>This is a tooltip. This is the first step for the jquery path system</p><div class="tooltiptail"></div></div>
*/
preload(preloadi);
$(document).on('mouseenter mouseleave', '.inter [class]', function (event) {
$('.' + this.className + 't').toggle(event.type === 'mouseenter');
});
$(document).on('change', '#selectContainer [id]', function () {
alert(original);
prevClass = className;
className = $("select").val();
transformImage(className, original, link, prevClass); // call the method to do the image processing
})
$(document).on('click', '.inter [class], .inter #back [id]', function () {
prevClass = className;
className = (this.id || this.className).substr(1);
transformImage(className, original, link, prevClass); // call the method to do the image processing
})
})
边注:
附带说明一下,如果我使用了不正确的术语,或者我应该更改帖子的结构,请在我仍在学习时纠正我。:)