1

我有两个事件处理程序。一个是单击处理程序，另一个是更改处理程序。除了事件选择器之外，唯一的区别是为 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
    })


})

边注：

附带说明一下，如果我使用了不正确的术语，或者我应该更改帖子的结构，请在我仍在学习时纠正我。:)

4

1 回答 1

3

我建议不要将不同选择器的事件处理程序混合在一起，而只是将通用功能移动到可以调用的通用函数中。这将帮助您维护不同的事件，因为将来对这些处理程序中的任何一个进行的任何修改都将使这种方法变得更容易，而不是稍后再将它们分开。

有时你不想做所有事情DRY。

$(function(){ //ready is not required if it is bound to document head
    $(document).on('change', '#selectContainer [id]', function () {
         prevClass = className;
         className = $("select").val();       <<<< DIFFERENT
         transformImage(className); // 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);      <<<< DIFFERENT
       transformImage(className);// call the method to do the image processing
     }
  });
//Move out your generic piece of functionality to another method. Put it out side of document.ready.
function transformImage(className)
{
    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);

       });
}
于 2013-05-29T02:20:39.247 回答