18.03.2013, 15:10
|
|
Интересующийся
|
|
Регистрация: 04.10.2012
Сообщений: 25
|
|
|
Изменение содержания по mouseOver, mouseOut
Всем привет.
Вот код:
function showText(classname, data) {
document.getElementByClassName(classname).inerHTML = data;
}
<span class="freeseat"
onMouseOver = "showText('freeseat','бронь');"
onMouseOut = "showText('freeseat','свободно');" >
</span>
Ничего не происходит, где я накосячил?
попробовал убрать событие onMouseOut, оставил лишь
<span class="freeseat"
onMouseOver = "showText('freeseat','бронь');" >
</span>
Все равно не работает
Последний раз редактировалось makc9I, 18.03.2013 в 15:16.
|
|
18.03.2013, 15:50
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
makc9I,
найдите 3 отличия )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
function showText(classname, data) {
document.getElementsByClassName(classname)[0].innerHTML = data;
}
</script>
</head>
<body>
<span class="freeseat"
onMouseOver = "showText('freeseat','бронь');"
onMouseOut = "showText('freeseat','свободно');" >свободно
</span>
</body>
</html>
|
|
19.03.2013, 12:32
|
|
Интересующийся
|
|
Регистрация: 04.10.2012
Сообщений: 25
|
|
рони, спасибо за помощь.
Понял, что мой способ в принципе не подходит для решения задачи.
Опишу ее здесь. Проблема такова:
Есть такие блоки с данными:
<div class="order_box">
<span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<div class="seat1 place">Иванов Иван</div>
<div class="seat2 place">Сидоров Василий</div>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
</div>
Данные дергаются с базы и отображаются в таком виде. Если место свободно, то добавляется класс free.
Задача: при наведении на блок с надписью "свободно" менять надпись на "бронь", добавлять пару css стилей(изменение цвета фона блока), а при клике на данный блок показывать <input type=text> с кнопкой OK, нажатие на которую отправит форму и внесет эти данные в бд.
|
|
19.03.2013, 17:09
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
makc9I,
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
<!-- div div, span, button {
float: left;
text-align: center;
width: 200px;
}
div.order_box {
width: 404px;
}
-->
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function () {
$(".free").mouseenter(function () {
$(this).text("бронь").css({
"background": "#FAD400",
"color": "#0000CD"
})
}).mouseleave(function () {
$(this).text("свободно").css({
"background": "",
"color": ""
})
}).click(function () {
var parent = $(this).parent();
var i = $(this).hasClass("seat3")? 0 : 1;
$(this).replaceWith($("<button/>", {
"text": "OK",
"css": {
"float": i ? "right" : "left"
},
"click": function () {
i++;
alert($(".seat" + i, parent).text());
i--;
$(this).replaceWith($("<span/>", {
"text": "заказ принят",
"css": {
"border": "#32CD32 solid 1px",
"color": "#0000FF",
"float": i ? "right" : "left"
}
}))
}
}));
});
})
</script>
</head>
<body>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван</div>
<div class="seat2 place">Сидоров Василий</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
<br>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван1</div>
<div class="seat2 place">Сидоров Василий1</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
<br>
<div class="order_box"> <span class="time">10 : 30- </span>
<span class="destination"> п. Молочное(5007)</span>
<br>
<div class="seat1 place">Иванов Иван2</div>
<div class="seat2 place">Сидоров Василий2</div>
<br>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<br>
</div>
</body>
</html>
Последний раз редактировалось рони, 20.03.2013 в 17:47.
|
|
20.03.2013, 10:08
|
|
Интересующийся
|
|
Регистрация: 04.10.2012
Сообщений: 25
|
|
спасибо за помощь, давно хотел jQuery познать, учиться на живой практике, то, что нужно. Возникло несколько вопросов, но пока не решена основная проблема, нет смысла их задавать. Всё это чудо не работает у меня на IE 9. Конкретно не работает такое:
...
<head>
<meta charset="windows-1251" />
<title>Заказ автомобилей</title>
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$(".today .free, .usual .free, .holliday .free").mouseenter(function () {
$(this).text("бронь")
.css({
"background": "#FAD400",
"color": "#0000CD",
"cursor": "pointer"
})
}).mouseleave(function () {
$(this).text("свободно")
.css({
"background": "",
"color": "",
})
})
})
</script>
...
</head>
<body>
...
<div class = 'usual'>
<div class = "DateLabel"><span class="date">21 03 2013</span> - <span class="DayName" >Четверг</span></div>
<div class="order_box">
<span class="time">11 : 30 - </span>
<span class="destination">с. Верховажье(5009)</span>
<div class="seat1 place">Петров И</div>
<div class="seat2 place free">свободно</div>
<div class="seat3 place free">свободно</div>
<div class="seat4 place free">свободно</div>
<div class="not_approved"> Статус:ожидает подтверждения</div>
</div>
</div>
...
</body>
...
|
|
20.03.2013, 10:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от makc9I
|
|
"color": "",
|
строка 21
в обьекте параметров css у вас лишняя запятая и желательно использовать <!DOCTYPE HTML> в начале документа |
|
20.03.2013, 12:01
|
|
Интересующийся
|
|
Регистрация: 04.10.2012
Сообщений: 25
|
|
Спасибо, действительно проблема была в этом. Декларация документа у меня присутствует, просто я не стал вносить весь код сюда.
Тогда вопросы по существу.
Мне нужно немного другое..
Первые 2 события, которые я указал в листинге выше отлично работают и это то, что мне надо. С этим я даже более-менее разобрался что к чему.
Но дальнейшая реакция должна быть другой. При клике должно появиться поле ввода для фамилии с кнопочкой ок. Грубо говоря форма с одним инпутом типа текст и кнопкой отправки(submit).
По вашему обработчику событий:
Я не очень понял смысл этой строчки:
var i = $(this).hasClass("seat3")? 0 : 1;
как я понимаю, если объект принадлежит к классу seat3 (зачем вообще это проверять?), то i присваивается значение 0, иначе 1.
Все дальнейшие манипуляции с этим i тоже вводят меня в ступор.
Последний раз редактировалось makc9I, 20.03.2013 в 12:03.
|
|
20.03.2013, 12:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от makc9I
|
|
var i = $(this).hasClass("seat3")? 0 : 1;
|
делалось чтобы определить слева или справа находится "свободно" и присвоить соотвествующий стиль и взять значение фамилии над ним.
css вы не предоставили и это я сделал на своё усмотрение.
...и возможно вам стоит обратится в раздел работа? |
|
20.03.2013, 14:45
|
|
Интересующийся
|
|
Регистрация: 04.10.2012
Сообщений: 25
|
|
|
Цитата:
|
|
...и возможно вам стоит обратится в раздел работа?
|
то, что я делаю, никоим образом не комерческое задание. Да и осталась мелочь, всунуть в этот div форму с инпутом, надеюсь дойти до этого без вложения денег. Спасибо Вам за помощь. Не смею настаивать на дальнейшей помощи. |
|
20.03.2013, 15:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
makc9I,
смутно представляю чего вы хотите до сих пор )))
может вы дадите живой пример как выглядит <div class = 'usual'> до нажатия кудато там и после нажатия 2 дива на странице с css ...
|
|
|
|
