У меня проблема, включая положение изображения в условной - PullRequest
1 голос
/ 24 мая 2019

Проблема в фрагменте кода, который начинается с события "mouseup". Я пытаюсь отобразить предупреждение при перетаскивании изображения .tile, привязывая его к разделу .amherst. Изображение привязывается к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>

Я хотел показать предупреждение, ноэто не так, и я не получаю сообщений об ошибках

1 Ответ

0 голосов
/ 24 мая 2019

Ваш $ ('. Tile'). Mouseup (с таким очень строгим позиционированием), скорее всего, никогда не вызовет оповещение.Если вы хотите, вам нужно вызвать его после завершения перетаскивания, что означает либо обратные вызовы, либо событие остановки jQuery, как в этой демонстрации: http://www.tutorialspark.com/jqueryUI/jQuery_UI_Draggable_Start_Stop_Events.php.Попробуйте написать предупреждение в функции остановки, например:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...