training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

Событие click jquery

Создано: 23 декабря 2015Автор: Егор Астапов1702 просмотраСложность: легкий

Очень часто используют событие click jquery. Обычно после события срабатывает особый сценарий. Вы можете придумать практически любой функционал на сайте. При обычном щелчке по ссылке пользователь переходит на другую страницу. Тут 2 пути использования этого события.

  1. Блокировать переход на другую страницу при помощи return false. Тут можно вызывать различные окна и подгружать в эти окна новый контент.
  2. Отслеживать перемещение пользователя по странице. Вы можете сделать что-то типа яндекс-метрики. Пользователь щёлкнул по кнопке или ссылке и перешёл на другую страницу. При переходах между страницами происходит запись данных в БД. Если у вас интернет магазин, то вы можете отследить самый популярный товар, даже если не было продаж. Пользователи будут просматривать нужный им товар, переходя по ссылкам. Даже если в базе данных не будет информации, вы все рано поймете на каких страницах был пользователь и на что он нажимал. Конечно, кто-то скажет что лучше использовать яндекс метрику для таких целей. Решайте сами! Для специфических задач лучше написать самому свою функцию, которая будет работать по событию jquery.

Сделайте текстовой документ в формате html и разместите в нем код что ниже. Вся информация будет выводиться в теге span. Щёлкая по абзацам p, вы увидите в теге span каждый раз новые данные. 


<style>
  p { color:red; margin:5px; padding:5px; cursor:pointer; }
  p.hilite { background:yellow; }
  </style>
</head>
<body>
  <p id='id1' name='name1'>First Paragraph</p>
  <p id='id2' name='name2'>Second Paragraph</p>
  <p id='id3' name='name3'>3 Paragraph</p>
  <p id='id4' name='name4'>4 Paragraph</p>
  <p id='id5' name='name5'>Yet one more Paragraph</p>
<span>Вывод</span>

Вставьте следующий javascript код на страницу. При наведении на абзац вокруг абзаца будет появляться желтый фон + в теге span появится новая информация. При щелчке по абзацу сам абзац будет исчезать. 


$("p").click(function () {
  $(this).slideUp();
  // блокировка перехода на другую страницу
  return false;
});

$("p").hover(function () {
  $(this).addClass("hilite");
}, function () {
  $(this).removeClass("hilite");
  var obj = {}; 
  obj.id = $(this).attr('id');
  obj.name = $(this).attr('name');
  $("span").text('obj: ' + obj.id + ', name: ' + obj.name);
  // блокировка перехода на другую страницу
  return false;
});

Вы можете обратиться к свойствам объекта при помощи $(this). Если применить к селектору функцию attr(), то вы сможете узнать текущие свойства элемента. Например, $(this).attr('href') покажет вам ссылку.

Вы можете изменить свойства объекта. Смотрите статью как узнать изменить свойства элемента или атрибута attr() jquery.

Комментарии

реклама