Question

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


})

侧面注意：

如果我使用了不正确的术语，或者如果我要更改帖子的结构，请在旁边注意，请在我还在学习时纠正我。：）

Answer 1

我建议不要混合使用不同选择器的事件处理程序，而只是将通用功能移动到可以调用的公共函数。这将有助于您维护不同的事件，因为将来任何这些处理程序所需的任何修改都将使这种方法更容易，而不是再次将它们拆分出来。

有时你不想做所有事情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);

       });
}

如何将两个jQuery事件处理程序连接在一起

1 个答案: