时间戳

首页 > 解决方案 > 我遇到了一个问题，包括条件中的图像位置

javascript - 我遇到了一个问题，包括条件中的图像位置

问题描述

问题出在以“mouseup”事件开头的片段中。我试图在拖放 .tile 图像时显示警报，将其捕捉到 .amherst div。图像捕捉到 div，但没有警报显示。

我是一个真正的 Javascript/jQuery 初学者编程。我不知道如何在条件中包含 position() 函数，但在网上找到了示例——但我仍然不确定我是否正确地理解了其中的一部分。而且我不确定在这里使用“this”。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container{              
    position:relative;
}
.tampa{
    position:absolute;
    top:418px;
    left:907px;
    width:250;
}
.tile{
    width:47px;
    height:47px;
}
#tile0{
    position:absolute;
    top:590px;
    left:328px;
}
#tileH{
    position:absolute;
    top:590px;
    left:375px;
}
#tileF{
    position:absolute;
    top:590px;
    left:422px;
}
#tileR{
    position:absolute;
    top:590px;
    left:469px;
}
.img{
    width:100%; 
    height:auto;
}
.amherst{
    position:absolute;
    top:417px;
    left:827px;
}
</style>
<script src="jQ/jQuery.js"></script>
<script src="jQ/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
  $("document").ready(function(){
    $('.tile').mouseup(function(){
       if ($(this).position().top==417 && 
           $(this).position().left==827){ 
              alert("Hello");
           }
       });
     $('.tampa').click(function(){
       if ($('.tampa').attr('src')== 'GamePremiseOff.jpg'){
         $('.tampa').attr('src', 'GameConclusionOff.jpg');
       } else if ($('.tampa').attr('src')== 'GameConclusionOff.jpg'){
         $('.tampa').attr('src', 'GamePremiseOff.jpg');
       }
     });
     $('#tile0').draggable({snap:".amherst"});
     $('#tileH').draggable({snap:".amherst"}); 
     $('#tileF').draggable({snap:".amherst"});
     $('#tileR').draggable({snap:".amherst"});
   });
</script>
</head>
<body>
<div class="amherst"></div>
<div class="container">
  <img src='GameboardCompleteDemo.jpg' width='1620' height='740'>
  <img class='tampa' src='GamePremiseOff.jpg'>
  <img id='tile0' class='tile' src='GameTile0.jpg'>
  <img id='tileH' class='tile' src='GameTileH.jpg'>
  <img id='tileF' class='tile' src='GameTileF.jpg'>
  <img id='tileR' class='tile' src='GameTileR.jpg'>
</div>
</body>
</html>

我希望显示警报，但没有，而且我没有收到任何错误消息

标签： javascriptjqueryposition

解决方案

您的 $('.tile').mouseup （具有非常严格的定位）很可能永远不会发出警报。如果你愿意，你需要在可拖动完成后调用它，这意味着回调或 jQuery 停止事件，如演示中的：http ://www.tutorialspark.com/jqueryUI/jQuery_UI_Draggable_Start_Stop_Events.php 。尝试在停止函数中编写警报，如下所示：

stop: function() { alert('hi') }

推荐阅读