2011-05-03 48 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