Я создал форму фиктивного заказа, в которой всплывающие подсказки работают от jQuery ... Когда вы наводите курсор на метки супов, которые вы можете выбрать, всплывающая подсказка отображает себя и дает некоторую информацию о супе (я извлекаю данные изсервер из php файла - выдаст источник в конце вопроса).Я использую механизм зацикливания, чтобы сместить всплывающую подсказку, чтобы при переходе к меткам другого супа и наведению на них они каждый раз смещались на определенную величину.
Теперь вот в чем проблема ... Вы можете навести курсор на каждый из них один раз, и он будет работать нормально, но если вы пройдете по ним снова, всплывающие подсказки будут появляться все ниже и ниже, пока они не исчезнут полностью.Я знаю, что это как-то связано с моей циклической структурой, но я не могу понять, как завершить ее в этой ситуации и установить приращение смещения обратно к исходному значению (поэтому, если вы хотите снова навести указатель мыши на них, всплывающая подсказка появляется в том жев первый раз, когда вы наводите курсор на них).
Я только начал изучать jQuery за последние 2 недели и смотрю на их библиотеку, она кажется довольно сложной, и по какой-то причине я иногда путаю ее со стандартным Javascriptи даже Java и PHP, поэтому я прошу прощения, если проблема окажется тривиальной (в любом случае опытному программисту jQuery).
Я загрузил форму на мой хост, чтобы вы все могли взглянуть на форму и сами убедиться в том, что происходит, вы можете просмотреть страницу на http://www.interkiwiwebdevelopers.com/code-examples/scarfiesoupshack/. Когда вы попадете на страницу,просто наведите курсор на каждое из названий супов, и вы увидите информацию, как описано ранее.Как я уже говорил ранее, кажется, что он отлично работает при первом наведении на каждый из них, но после второго и каждого последующего наведения они просто продолжают появляться на странице все ниже и ниже, а не возвращаются в исходное положение.Вы можете просмотреть исходный код для всех файлов, кроме файла "soupsInfo.php" (он используется в файле "scarfiesoupshack.js"), который будет отображаться ниже:
<?php
/*
* soupsInfo.php: this php script uses a switch-case statement to echo out a string
* describing the soup, of whose "soup_id" is in the GET query string eg:
*
* If you hover over the "Pumpkin Soup" label (whose soup_id would be "pumpkin"),
* the text that would be echoed out (and displayed in the "hidden" div) would be
* "A delicious creamy pumpkin soup".
*
* Refer to line 24 in "scarfiesoupshack.js" to see where the GET
* query string is being created.
*/
if (isset($_POST['soup_id'])){
// get soup_id value
$soup_id = $_POST['soup_id'];
switch($soup_id){
case "pumpkin":
echo ("<p style=\"margin-top:0px;\">A delicious creamy pumpkin soup</p>");
break;
case "chicken";
echo ("<p style=\"margin-top:0px; opacity:1.0;\">A flavoursome chicken soup</p>");
break;
case "clam":
echo ("<p style=\"margin-top:0px;\">Fresh clam soup from the ocean</p>");
break;
case "harira":
echo ("<p style=\"margin-top:0px;\">Whats harira?</p>");
break;
default:
echo ("<p style=\"margin-top:0px;\">What is this soup?</p>");
}
}
?>
Извинения замое объяснение проблемы было настолько плотным, что я не знал, как объяснить это в сжатой форме ...
Заранее спасибо:).