Создание оператора if / else, чтобы изменения страницы основывались на значении курсора - PullRequest
Новая
       34

Создание оператора if / else, чтобы изменения страницы основывались на значении курсора

0 голосов
/ 30 мая 2018

Я создаю игру в садоводство для детей.Пользователь нажимает на нужный ему садовый инструмент (например, лопату), а затем нажимает на фоновое изображение поля, которое приведет его к следующему шагу / странице (например, фоновое изображение вспаханного поля).Функция javascript, которая меняет курсор на изображение инструмента, работает нормально.Тем не менее, я замечаю изменения фонового изображения при любом щелчке, что не то, что я хочу.Он должен изменяться только тогда, когда курсор имеет правильное значение (например, лопатка).

Чтобы решить эту проблему, я подумал, что лучше всего использовать вторую функцию в форме оператора if / else.

<script>
 function myFunction() {

  document.body.style.cursor = "url(img/Shovel.png), pointer";

}

function changePage() {
  var cursor = document.body.style.cursor;

  if (cursor === "url(img/Shovel.png)") {
    window.location.href = "Potato1.html";
  } else {
    window.location.href = "Potato0.html";
  }
}

Это не работает, как я думал, страница автоматически изменится на следующую.Мне интересно, имеет ли смысл моя логика, поэтому я был бы признателен за некоторые рекомендации.

1 Ответ

0 голосов
/ 30 мая 2018

Следующее будет отображать положение последней скрытой рамки при каждом нажатии: 

var current = undefined;

document.body.addEventListener('click', fn, true);

$('#topLeft').hover(function(){
  current = 'topLeft'
})
$('#topRight').hover(function(){
  current = 'topRight'
})
$('#bottomLeft').hover(function(){
  current = 'bottomLeft'
})
$('#bottomRight').hover(function(){
  current = 'bottomRight'
})

function fn(){
  console.log(current)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:100px; height:100px;">
  <input id="topLeft" style="width:30px; height: 30px; background-color:green;" />
  <input id="topRight" style="width:30px; height: 30px; background-color:red;" />
  <input id="bottomLeft" style="width:30px; height: 30px; background-color:yellow;" />
  <input id="bottomRight" style="width:30px; height: 30px; background-color:blue;" />
</div>

Для вашей конкретной проблемы просто устанавливайте переменную всякий раз, когда кто-то нажимает на инструмент: 

$('#shovel').click(function(){
    current = 'shovel'
})

, затем проверяйте переменную при нажатиина почве 

$('#soil').click(function(){
    if(current === 'shovel')
        [whatever]
    else
        [whatever 2]
})

Примечание:

Вы устанавливаете курсор как "url(img/Shovel.png), pointer", а затем сравниваете его с "url(img/Shovel.png)".Вы пытались отладить значение cursor на данный момент? 

document.body.style.cursor = "url(\"img/Shovel.png\"), pointer";

console.log(document.body.style.cursor) // url("img/Shovel.png"), pointer

var result = (document.body.style.cursor === "url(\"img/Shovel.png\")")

console.log(result) // false

result = (document.body.style.cursor === "pointer")

console.log(result) // false

result = (document.body.style.cursor === "url(\"img/Shovel.png\"), pointer")

console.log(result) // true
...