Форум

makc9I · #1 (**permalink**) 18.03.2013, 15:10

Всем привет.
Вот код:

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>

Все равно не работает

рони · #2 (**permalink**) 18.03.2013, 15:50

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>

makc9I · #3 (**permalink**) 19.03.2013, 12:32

рони, спасибо за помощь.
Понял, что мой способ в принципе не подходит для решения задачи.
Опишу ее здесь. Проблема такова:
Есть такие блоки с данными:

<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, нажатие на которую отправит форму и внесет эти данные в бд.

рони · #4 (**permalink**) 19.03.2013, 17:09

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>

makc9I · #5 (**permalink**) 20.03.2013, 10:08

спасибо за помощь, давно хотел 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>
...

рони · #6 (**permalink**) 20.03.2013, 10:40

Сообщение от makc9I

"color": "",

строка 21
в обьекте параметров css у вас лишняя запятая и желательно использовать <!DOCTYPE HTML> в начале документа

makc9I · #7 (**permalink**) 20.03.2013, 12:01

Спасибо, действительно проблема была в этом. Декларация документа у меня присутствует, просто я не стал вносить весь код сюда.
Тогда вопросы по существу.
Мне нужно немного другое..
Первые 2 события, которые я указал в листинге выше отлично работают и это то, что мне надо. С этим я даже более-менее разобрался что к чему.
Но дальнейшая реакция должна быть другой. При клике должно появиться поле ввода для фамилии с кнопочкой ок. Грубо говоря форма с одним инпутом типа текст и кнопкой отправки(submit).

По вашему обработчику событий:
Я не очень понял смысл этой строчки:

var i = $(this).hasClass("seat3")? 0 : 1;

как я понимаю, если объект принадлежит к классу seat3 (зачем вообще это проверять?), то i присваивается значение 0, иначе 1.
Все дальнейшие манипуляции с этим i тоже вводят меня в ступор.

рони · #8 (**permalink**) 20.03.2013, 12:39

Сообщение от makc9I

var i = $(this).hasClass("seat3")? 0 : 1;

делалось чтобы определить слева или справа находится "свободно" и присвоить соотвествующий стиль и взять значение фамилии над ним.
css вы не предоставили и это я сделал на своё усмотрение.
...и возможно вам стоит обратится в раздел работа?

makc9I · #9 (**permalink**) 20.03.2013, 14:45

Цитата:

...и возможно вам стоит обратится в раздел работа?

то, что я делаю, никоим образом не комерческое задание. Да и осталась мелочь, всунуть в этот div форму с инпутом, надеюсь дойти до этого без вложения денег. Спасибо Вам за помощь. Не смею настаивать на дальнейшей помощи.

рони · #10 (**permalink**) 20.03.2013, 15:11

makc9I,
смутно представляю чего вы хотите до сих пор )))
может вы дадите живой пример как выглядит <div class = 'usual'> до нажатия кудато там и после нажатия 2 дива на странице с css ...

Форум

Справочник

Discord чат

Курсы javascript