Jump to content
  • entries
    5
  • comments
    7
  • views
    623

JS Tricks

SooR

322 views

#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 Comments


Recommended Comments

#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

Share this comment


Link to comment

#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

Share this comment


Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.