我如何獲得JavaScript與Jquery交互？

嗨，我正在爲學校計算做一個項目。我需要讓我可拖拽的jQuery框與我的交通燈（我的交通信號燈在一個週期內）交互，當框需要點亮交通燈時，這是可能的嗎？任何幫助將不勝感激，我如何獲得JavaScript與Jquery交互？

這是我的代碼到目前爲止，

<!DOCTYPE html> 
<html> 
    <head> 
<script type="text/javascript"> 
var lights = ["red.png", "yellow.png", "green.png"] 
var lightscentre = 0 
var timer 

function ChangeImage() { 
clearTimeout(timer) 
if (++lightscentre == lights.length) 
    lightscentre = 0 

    document.images[0].src = lights[lightscentre] 

    timer = setTimeout(LightCycle, 1000) 
} 
function LightCycle() { 
clearTimeout(timer) 
if (++lightscentre == lights.length) 
lightscentre = 0 

    document.images[0].src = lights[lightscentre] 

    timer = setTimeout(LightCycle, 1000) 
} 
function stopCycle() { 
clearTimeout(timer) 
} 

</script> 
</head> 
<body> 
<img src="red.png" name="nt1" width="130" height="175" alt="123"> 

    <form> 
<input type="button" value="Go" name="Go" onclick="ChangeImage()"> 
    <input type="button" value="Stop" name="Stop" onclick="stopCycle()"> 
    </form> 

<head> 

<style> 
#makeMeDraggable { width: 100px; height: 100px; background: red; } 
</style> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(init); 

function init() { 
    $('#makeMeDraggable').draggable(); 
} 

</script> 

</head> 
<body> 

<div id="content" style="height: 400px;"> 
    <div id="makeMeDraggable"> </div> 
</div> 


</body> 
</html>

來源

2016-03-05 oliverfjenkins

請你分開JS代碼和HTML代碼。此外，我建議創建JSFiddle，以便人們可以幫助你。在發佈之前閱讀本文：http://stackoverflow.com/help/mcve – Farside

要麼你可以在JQuery中做動畫（？）或你正在計劃的功能。否則，您可以將JS中的Jquery變量轉換爲在您的函數中使用它們。最好的方法是採取任何GET/POST並在Jquery中執行這些操作，並在JS中執行其他任何操作，或者執行數據提取部分。

另外，祝你的項目好運。隨時在@ ev1stensberg（twitter）打我並聊天。

<!DOCTYPE html> 
    <html> 
     <head> 
    <script type="text/javascript"> 
    var lights = ["red.png", "yellow.png", "green.png"] 
    var lightsCentre = 0; 
    var timer = setInterval(function { 
     window.location.reload() 
    }, 3000); 

    var turnOnTheLights = function(e) { 
     e.preventDefaults(); 

    switch(lights) { 
     case (document.getElementbyId('redLights').onClick == true) : 
     return lights[0] 

     setTimeout(function() { 
     console.log("hello"), 

     }, 3000); 

     case(document.getElementbyId('redLights').onClick == true && 
     return lights[0] == true) : 

     return lights[1]. 
     setTimeout(function() { 
      console.log("I'm a terrible programmer"); 
     }, 3000) 

     case(document.getElementbyId('redLights').onClick == true && 
     return lights[1] == true) : 
     return clearInterval(timer) 

     break; 

     default: window.location.reload(); 

    } 
return lights; 
    } 
var turnOffTheLights = function(e) { 
e.preventDefaults(); 
    return window.setTimeout(function() { 
    console.log("Heyho"), 3000 
    }); 

} 
    </script> 
    </head> 
    <body> 
    <img src="red.png" id ="redLights" name="nt1" width="130" height="175" alt="123"> 

     <form> 
    <input type="button" value="Go" name="Go" onclick="turnOnTheLights()"> 
     <input type="button" value="Stop" name="Stop" onclick="turnOffTheLights()"> 
     </form> 

    <head> 

    <style> 
    #makeMeDraggable { width: 100px; height: 100px; background: red; } 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 

    $(init); 

    function init() { 
     $('#makeMeDraggable').draggable(); 
    } 

    </script> 

    </head> 
    <body> 

    <div id="content" style="height: 400px;"> 
     <div id="makeMeDraggable"> </div> 
    </div> 


    </body> 
    </html>

來源

2016-03-05 14:05:12

我會讓它變成這樣。我只是改變了js，而不是jquery。另外，還原數組索引，他們錯了。它也可能包含錯誤。 –

可以使用拖放事件：

function init() { 
    var $light = $('img'); 
    var $draggable = $('#makeMeDraggable').draggable({ 
    drag: function(event, ui) { 
     var light_offset = $light.offset(); 
     if (ui.offset.left < light_offset.left+$light.width() && 
      ui.offset.left + $draggable.width() > light_offset.left && 
      ui.offset.top + $draggable.height() > light_offset.top && 
      ui.offset.top < light_offset.top+$light.height()) { 
      if (!timer) { 
      LightCycle(); 
      } 
     } else { 
     clearTimeout(timer); 
     timer = null; 
     } 
    } 
    }); 
}

JSFIDDLE

來源

2016-03-05 14:41:48 jcubic

我如何獲得JavaScript與Jquery交互？

回答

相關問題