Форум

Триви · #1 (**permalink**) 21.04.2011, 15:33

Ребята, упростил код, не понимаю почему не пашет?
Всё же до безобразия просто!

Полный пример: http://www.usaparts.ru/jquerytest/index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

   // Функция открывает/закрывает div и меняет соответствующую диву иконку
   function showClose(id) {
      $('.div_' + id).toggle(
          function () {
             $("#img_" + id).attr('src', 'minus.gif');
          },
          function () {
             $("#img_" + id).attr('src', 'plus.gif');
          }
       );
   }

</script>

<img id="img_07" src="minus.gif" onclick='showClose("07")'>
<div class="div_07">Текст текст текст текст текст</div>
<br>
<img id="img_09" src="minus.gif" onclick='showClose("09")'>
<div class="div_09">Текст2 текст2 текст2 текст2 текст2</div>

Sweet · #2 (**permalink**) 21.04.2011, 15:56

Сообщение от Триви

Функция открывает/закрывает div

Эмм... И на какой строчке это по-твоему происходит?

Триви · #3 (**permalink**) 21.04.2011, 15:58

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

Эмм... И на какой строчке это по-твоему происходит?

Да на 7-й должно ваще то (toggle)..

Sweet · #4 (**permalink**) 21.04.2011, 16:00

А, ну да, не знал - не большой я знаток jQuery

walik · #5 (**permalink**) 21.04.2011, 16:03

Не знаю как у тебя там устроен toggle (читал но не понял

), но вот так работает:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function showClose(id) {
      $('.div_' + id).toggle(
          function() {
			if ($(this).is(':visible'))
				$('#a_'+id).html('Спрятать');
			else
				$('#a_'+id).html('Показать');
		  }
       );
   }
</script>
</head>
<body>
<a href="#" id="a_07" onclick="showClose('07'); return false;">Спрятать</a>
<div class="div_07">Текст текст текст текст текст</div>
<br>
<a href="#" id="a_09" onclick="showClose('09'); return false;">Спрятать</a>
<div class="div_09">Текст2 текст2 текст2 текст2 текст2</div>
</body>
</html>

Триви · #6 (**permalink**) 21.04.2011, 16:19

Используя toggle, я следовал следующему описанию:

Цитата:

toggle(fn, fn1)
Переключается между двумя функциями, которые по очереди вызываются каждым следующим кликом. Каждый раз, когда клик совершен на выбранном элементе, срабатывает первая функция. Если на том же элементе совершен еще один клик - срабатывает вторая функция.

walik · #7 (**permalink**) 21.04.2011, 16:24

Ну так указывая

$('.div_' + id).toggle

Вешается событие на сам ДИВ, а вам надо по нажатию на изображение менять ?

Триви · #8 (**permalink**) 21.04.2011, 16:39

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

Ну так указывая

$('.div_' + id).toggle

Вешается событие на сам ДИВ, а вам надо по нажатию на изображение менять ?

Как так? А почему тогда такой код закрывает див, по нажатию на изображение? -

function showClose(id) {
      $('.div_' + id).toggle();
}

Serg_pnz · #9 (**permalink**) 21.04.2011, 16:45

Тугглите лучше классы, сдвигая картинку.

walik · #10 (**permalink**) 21.04.2011, 16:52

Так:

$('.div_' + id).toggle();

Ты просто меняешь видимость ДИВа (Показать.Спрятать) Подробнее

А той конструкцией ты задаешь функции которые будут выполняться при кликах: Подробнее

.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] );
handler(eventObject) - Функция выполняется когда четное число клика
handler(eventObject) - Функция выполняется когда нечетное число клика
handler(eventObject) - Дополнительный обработчик

Пример из документации:

<html>
<head>
  <style>
  ul { margin:10px; list-style:inside circle; font-weight:bold; }
  li { cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>

    <li>Take a jog</li>
  </ul>
<script>
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript