我如何获得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交互？

回答

相关问题