1

2 つのイベント ハンドラーがあります。1 つはクリック ハンドラで、もう 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 に答える