2011-05-03 81 views
2

我更新了一半的方式my website我遇到了一個我似乎無法解決的問題。如果你點擊標有「Alchemy Lab」的綠色按鈕,Alchemy Lab將會彈出。之後,如果您拖動實驗室一次並單擊實驗室中的紅色和綠色箭頭,則計數器的工作方式應該最多爲10個。如果再拖動實驗室2次左右,然後單擊綠色或紅色箭頭,則計數關閉3.所以每次你放棄實驗室時,它會再次點擊點擊。任何想法爲什麼或如何解決它?先謝謝了。jQuery拖動拖動後應用多個點擊

的javascript:

function handleNewClicks() { 
    $(".pro_cell_3").click(function() { 
     var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10); 
     var maxUp = 10; 

     if (currentUp == maxUp) { 
      $(this).parent().find('.pro_cell_2').text("1"); 
     } else { 
      $(this).parent().find('.pro_cell_2').text(currentUp + 1); 
     } 

    }); 
    $(".pro_cell_4").click(function() { 
     var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10); 
     var maxUp = 10; 

     if ((currentUp - 1) == 0) { 
      $(this).parent().find('.pro_cell_2').text(maxUp); 
     } else { 
      $(this).parent().find('.pro_cell_2').text(currentUp - 1); 
     } 
    }); 
    $(".up_cell_3").click(function() { 
     var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10); 
     var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10); 
     var className = $(this).parent().parent().attr("class"); 
     className = className.replace("ui-draggable ", ""); 

     if (currentUp == maxUp) { 
      $(this).parent().find('.up_cell_2').text("1"); 
      $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_1.png)' }); 
     } else { 
      $(this).parent().find('.up_cell_2').text(currentUp + 1); 
      $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp + 1) + '.png)' }); 
     } 

    }); 
    $(".up_cell_4").click(function() { 
     var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10); 
     var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10); 
     var className = $(this).parent().parent().attr("class"); 
     className = className.replace("ui-draggable ", ""); 

     if ((currentUp - 1) == 0) { 
      $(this).parent().find('.up_cell_2').text(maxUp); 
      $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + maxUp + '.png)' }); 
     } else { 
      $(this).parent().find('.up_cell_2').text(currentUp - 1); 
      $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp - 1) + '.png)' }); 
     } 

    }); 
} 

function proCoding() {  
    proWrap = document.createElement('div'); 
    $(proWrap).attr('class', 'pro_wrap'); 
    proCell1 = document.createElement('span'); 
    $(proCell1).attr('class', 'pro_cell_1'); 
    proCell2 = document.createElement('span'); 
    $(proCell2).attr('class', 'pro_cell_2'); 
    proCell3 = document.createElement('span'); 
    $(proCell3).attr('class', 'pro_cell_3'); 
    proCell4 = document.createElement('span'); 
    $(proCell4).attr('class', 'pro_cell_4'); 

    proCell2.innerText = "1"; 
    proWrap.appendChild(proCell1); 
    proWrap.appendChild(proCell2); 
    proWrap.appendChild(proCell3); 
    proWrap.appendChild(proCell4); 
} 

function upCoding() { 
    pos_top = $(window).scrollTop() + top_off_set; 
    pos_left = $(window).scrollLeft() + left_off_set; 

    upWrap = document.createElement('div'); 
    $(upWrap).attr('class', 'up_wrap'); 
    upCell1 = document.createElement('span'); 
    $(upCell1).attr('class', 'up_cell_1'); 
    upCell2 = document.createElement('span'); 
    $(upCell2).attr('class', 'up_cell_2'); 
    $(upCell2).attr('max', '10'); 
    upCell3 = document.createElement('span'); 
    $(upCell3).attr('class', 'up_cell_3'); 
    upCell4 = document.createElement('span'); 
    $(upCell4).attr('class', 'up_cell_4'); 

    upCell2.innerText = "1"; 
    upWrap.appendChild(upCell1); 
    upWrap.appendChild(upCell2); 
    upWrap.appendChild(upCell3); 
    upWrap.appendChild(upCell4); 

    newLab = document.createElement('div'); 
} 

$(".nav_alchemy_lab").click(function() { 
    proCoding(); 
    upCoding(); 
    newLab.appendChild(proWrap); 
    newLab.appendChild(upWrap); 

    $(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({ 
     containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move', 
     start: function (e) { 

     }, 
     stop: function (e) { 
      setTimeout(function() { 
       handleNewClicks() 
      }, 1); 
     } 
    }) 

}); 

$(".ui-draggable").draggable({ 
    containment: '#content', 
    stack: '#cardPile div', 
    cursor: 'move' 
}); 

$(".ui-droppable").droppable({ 
    accept: '#cardPile div', 
    drop: handleCardDrop 
}); 

function handleCardDrop(event, ui) { 
    $(ui.draggable).css('top', $(this).position().top); 
    var divWidth = ui.draggable.width(); 
    var divLeft = $(this).position().left; 
    if (divWidth == 100) { 
     divLeft -= 0; 
    } else if (divWidth == 200) { 
     divLeft -= 100; 
    } else if (divWidth == 300) { 
     divLeft -= 100; 
    } else { 
     divLeft -= 0; 
    } 
    $(ui.draggable).css('left', divLeft); 
} 
+0

我希望你不希望人們瀏覽你的網站的來源。請張貼相關代碼。 – 2011-05-03 03:47:21

+0

我建議你嘗試發佈你認爲是產生錯誤的相關代碼,最好是你試圖解決它。這不是一個免費完成工作的網站,而是關於協作的網站。 – Trufa 2011-05-03 03:47:37

+0

我添加了相關的javascript,但是一半的html是基於你點擊的而創建的,另一半是一個巨大的7x8網格,所以你需要像figbug這樣的插件。我不想讓任何人看我的網站...網站有一個特定的觀衆,我非常懷疑這裏的任何人甚至會有興趣,我只是想修復我的代碼。 – Tony 2011-05-03 04:04:33

回答

3

您完成拖動東西時,都會運行功能handleNewClicks()

$(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({ 
      containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move', 
      start: function (e) { 

      }, 
      stop: function (e) { 
       setTimeout(function() { 
        handleNewClicks() 
       }, 1); 
      } 
     }) 

此外,此功能將事件綁定到單元格。當您將事件綁定到單元格多次時,它們會被多次調用。初始化鍊金術實驗室時,您只需運行一次handleNewClicks()

function handleNewClicks() { 
     $(".pro_cell_3").click(function() { 
      var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10); 
      var maxUp = 10; 

      if (currentUp == maxUp) { 
       $(this).parent().find('.pro_cell_2').text("1"); 
      } else { 
       $(this).parent().find('.pro_cell_2').text(currentUp + 1); 
      } 

     }); 
     $(".pro_cell_4").click(function() { 
      var currentUp = parseInt($(this).parent().find('.pro_cell_2').text(), 10); 
      var maxUp = 10; 

      if ((currentUp - 1) == 0) { 
       $(this).parent().find('.pro_cell_2').text(maxUp); 
      } else { 
       $(this).parent().find('.pro_cell_2').text(currentUp - 1); 
      } 
     }); 
     $(".up_cell_3").click(function() { 
      var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10); 
      var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10); 
      var className = $(this).parent().parent().attr("class"); 
      className = className.replace("ui-draggable ", ""); 

      if (currentUp == maxUp) { 
       $(this).parent().find('.up_cell_2').text("1"); 
       $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_1.png)' }); 
      } else { 
       $(this).parent().find('.up_cell_2').text(currentUp + 1); 
       $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp + 1) + '.png)' }); 
      } 

     }); 
     $(".up_cell_4").click(function() { 
      var currentUp = parseInt($(this).parent().find('.up_cell_2').text(), 10); 
      var maxUp = parseInt($(this).parent().find('.up_cell_2').attr("max"), 10); 
      var className = $(this).parent().parent().attr("class"); 
      className = className.replace("ui-draggable ", ""); 

      if ((currentUp - 1) == 0) { 
       $(this).parent().find('.up_cell_2').text(maxUp); 
       $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + maxUp + '.png)' }); 
      } else { 
       $(this).parent().find('.up_cell_2').text(currentUp - 1); 
       $(this).parent().parent().css({ 'background-image': 'url(images/' + className + '_' + (currentUp - 1) + '.png)' }); 
      } 

     }); 
    } 

基本上,要解決這個問題,你可以改變下面的函數什麼,我有如下:

$(".nav_alchemy_lab").click(function() { 
     proCoding(); 
     upCoding(); 
     newLab.appendChild(proWrap); 
     newLab.appendChild(upWrap); 



    $(newLab).attr('class', 'ui-draggable alchemy_lab').appendTo('#cardPile').css({ 'top': pos_top, 'left': pos_left, 'background-image': 'url(images/alchemy_lab_1.png)' }).draggable({ 
       containment: '#content', snap: true, stack: '#cardPile div', cursor: 'move' 
      }); 

handleNewClicks() 

    }); 

這是所有未經測試。

+0

哇...是的多數民衆贊成在它。當你有多個實驗室時,它確實會造成一個問題,但我會惹惱那些人,看看我能想出什麼。謝謝! – Tony 2011-05-03 04:40:39

+0

如果是因爲這些事件沒有綁定到新的實驗室,請嘗試使用jQuery的Live功能:http://api.jquery.com/live/ – 2011-05-03 04:47:38

+0

多數民衆贊成在我的想法,但...我不知道.live()存在,仍然在這裏學習。非常感謝,你在我的問題中回答了我的問題和我的問題!大聲笑再次感謝。 – Tony 2011-05-03 05:01:57