Перейти к содержанию
  • записи
    4
  • комментариев
    7
  • просмотра
    274

JS Tricks

SooR

143 просмотра

#1 Управляем классами элемента по hover

$('body').on('mouseenter mouseleave', '[data-hover-class]', function(e) {
  var $this = $(this), $target = $this, rules = $this.attr('data-hover-class').split(' '), over = (e.type == 'mouseenter');

  if ($this.attr('data-target')) {
    $target = $this.find($this.attr('data-target'));
  }

  rules.map(function(rule) {
    if (rule.charAt(0) == '+') {
      $target.toggleClass(rule.substring(1), over);
    } else if (rule.charAt(0) == '-') {
      $target.toggleClass(rule.substring(1), !over);
    } else if (/\>/.test(rule)) {
      $target.toggleClass(rule.slice(0, rule.indexOf('>')), !over);
      $target.toggleClass(rule.slice(rule.indexOf('>') + 1), over);
    }
  });
});

Атрибуты

data-hover-class="foo>bar -baz +qwe"

При наведении foo сменится на bar, удалится baz и добавится qwe

При потере курсора (mouseleave) правила инвертируются: bar меняется на foo, добавляется baz и удаляется qwe

data-target="[any-child-selector]"

Можно указать над каким дочерним элементом производить смену классов.

Атрибут необязательный.

 

Использование

<button type="button" class="btn btn-sm btn-link text-muted" data-hover-class="fa-heart>fa-times-circle -text-warning" data-target=">i" data-toggle="tooltip" data-placement="top" title="Удалить из закладок">
  <i class="fas fa-fw fa-heart text-warning text-danger"></i>
  <span class="d-none d-sm-inline">В закладках</span>
</button>

При наведении на <button> у его вложенного <i> класс fa-heart сменится на fa-times-circle и удалится класс text-warning

  • +1 3


2 Комментария


Рекомендуемые комментарии

#2 Моя интерпретация звездочного рейтинга на jQuery (Demo)

 

JavaScript

$(document).on('mouseover mouseleave click', '[data-rating]', function(e) {
  var $element = $(this), $target = $(e.target);

  if ($target.attr('data-value')) {
    $element.find('[data-value]').removeClass('fas text-warning').filter(':lt(' + $target.index() + ')').addClass('fas text-warning');

    if (e.type == 'click') {
      $element.find('input').val($target.attr('data-value'));
    }
  }

  if (e.type != 'mouseover') {
    $element.find('[data-value]').removeClass('fas text-warning').filter(':lt(' + $element.find('input').val() + ')').addClass('fas text-warning');
  }
}).find('[data-rating]').trigger('mouseleave');

 

HTML

<div class="text-black-50" data-rating>
  <input type="hidden" name="rating" value="1" />
  <i class="far fa-star" data-value="1"></i>
  <i class="far fa-star" data-value="2"></i>
  <i class="far fa-star" data-value="3"></i>
  <i class="far fa-star" data-value="4"></i>
  <i class="far fa-star" data-value="5"></i>
</div>

 

  • +1 2

Поделиться этим комментарием


Ссылка на комментарий

#3 Плавная прокрутка к целевому элементу по якорю.

Не требует удаления <base href="..."> из <head> (чего делать категорически не советую во избежание проблем со сторонними модулями)

 

JavaScript

+function(winHash) {
  function scrollToTarget(selector) {
    var $target = $(selector);

    if ($target.length > 0) {
      $('html, body').stop().animate({ scrollTop: $target.offset().top - 10 }, 300, 'swing');

      return true;
    }

    return false;
  }

  $('body').on('click', '[data-goto]', function(e) {
    e.preventDefault();

    scrollToTarget($(this).attr('href') || $(this).attr('data-goto'));
  });

  if (winHash && winHash != '#') {
    var _winHash = winHash.substring(1), selector = '';

    if (/^[a-z0-9_\-]/i.test(_winHash) && $('#' + _winHash).length > 0) {
      selector = '#' + _winHash;
    } else {
      selector = _winHash;
    }

    if (scrollToTarget(selector)) {
      history.pushState('', document.title, window.location.pathname + window.location.search);
    }
  }
}(window.location.hash);

 

HTML

<a href="#product-review" data-goto>Отзывы</a>
...
<div id="product-review">
  ...
</div>

<!-- ИЛИ -->

<button type="button" data-goto="#product-attributes">Характеристики</button>
...
<div id="product-attributes">
  ...
</div>

UPD: добавлен обработчик хэша адреса с селектором элемента

  • +1 1

Поделиться этим комментарием


Ссылка на комментарий

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.