CODE

Как с помощью jQuery добавить атрибут к элементу при клике

Содержание

Салют, друзья! С вами Дмитрий! У меня многие спрашивают, как при помощи jQuery добавить атрибут к элементу при клике. И сегодня, назрела мысль увековечить на своем блоге JavaScript, который способен добавлять любой атрибут любому элементу в html.

Для чего это вообще нужно?

Задач связанных с этим может быть масса, но я расскажу об одной, самой на мой взгляд востребованной. Просто в последнее время так попадается что проектов по разработке и созданию Landing Page весьма много. В принципе, одностраничники всегда были востребованы!

К примеру, есть у нас одностраничник, не важно каким образом он сверстан на cms или просто html и у него конечно же есть всплывающие формы отправки данных. А куда же без них? Более того, их как минимум 7 штук не считая «открытых». Но это, конечно, если лендос не в 3-5 экрана.

Так вот, чтобы знать откуда именно была отправка, да и в общем чтобы сильно не плодить сами формы, я использую этот маленький скрипт.

Читайте также:

JS

jQuery(document).ready(function($) {

  $('.txt-cart').click(function() { // Кликаем на кнопку с классом "txt-cart"
      var rel = $(this).attr('rel') // Берем у нее атрибут "rel"
      $('.in-put').val(rel);        // Вставляем "rel" в инпут с классом "in-pu"
   });

   $('.txt-cart').click(function() {  // Кликаем на кнопку с классом "txt-cart"
      var text = $(this).attr('rel'); // Берем у нее атрибут "rel"
      $('.form-title').text(text);    // Вставляем "rel" в "div" с классом "form-title"
   });

});

HTML

Допустим, есть у нас html код — кнопка с атрибутом rel и карточка товара, и по клику на нее мы передаем ее значение rel к примеру в первое или скрытое поле формы, а также в заголовок всплывающего окна. Так сказать, чтобы покупатель видел что он покупает или заказывает, а мы знали что именно.

<!-- Кнопка заказа -->
<button class="txt-cart" rel="Заказать авто">Заказать авто</button>

<!-- Всплывающая форма -->
<div class="form-title">Заказать авто</div>
<form>
   <input class="in-put" type="text" placeholder="Текст">
   <input type="text" placeholder="Текст">
   <input type="submit" value="">
</form>

Этот скрипт удобен тем, что не нужно создавать массу форм, а только одну, тем более если все формы на странице в принципе одинаковые. Вдобавок, он прекрасно работает на WordPress, со всеми его плагинами форм. Нужно только лишь добавить необходимый класс к полям и текстовым элементам.

Надеюсь, что данное решение облегчит задачу не только начинающим, но и «заядлым» прогерам которые устали плодоносить лишний код.